bookish-press 0.9.4 → 0.10.0

package/dist/components/Auth.svelte

@@ -4,38 +4,54 @@ import { writable } from "svelte/store";
 import { auth } from "../models/Firebase";
 import { USER } from "./page/Contexts";
 let { children } = $props();
+// Track the user and user loading status in state
 let loading = $state(true);
+// The store that tracks the auth context.
 const authentication = writable({
-  user: null,
-  loading: true,
-  login,
-  logout
+	user: null,
+	loading: true,
+	login,
+	logout
 });
+// Login using Firebase's password-less email verification
 async function login(email) {
-  if (auth) {
-    const actionCodeSettings = {
-      url: location.origin + "/confirm",
-      handleCodeInApp: true
-    };
-    await sendSignInLinkToEmail(auth, email, actionCodeSettings);
-    window.localStorage.setItem("email", email);
-  }
+	// If connected to firebase...
+	if (auth) {
+		const actionCodeSettings = {
+			url: location.origin + "/confirm",
+			handleCodeInApp: true
+		};
+		// Ask Firebase to log in with the given email
+		await sendSignInLinkToEmail(auth, email, actionCodeSettings);
+		// Remember the email in local storage so we don't have to ask for it again
+		// after returning to the link above.
+		window.localStorage.setItem("email", email);
+	}
 }
 function updateAuth(user) {
-  authentication.set({ user, loading, login, logout });
+	authentication.set({
+		user,
+		loading,
+		login,
+		logout
+	});
 }
+// Logout using Firebase's authentication framework.
 function logout() {
-  if (auth) {
-    return auth.signOut().then(() => updateAuth(null));
-  }
+	if (auth) {
+		return auth.signOut().then(() => updateAuth(null));
+	}
 }
+// On mount, subscribe to authentication changes.
 if (auth) {
-  const unsubscribe = auth.onAuthStateChanged((user) => {
-    loading = false;
-    updateAuth(user);
-  });
-  onDestroy(unsubscribe);
+	const unsubscribe = auth.onAuthStateChanged((user) => {
+		loading = false;
+		updateAuth(user);
+	});
+	// On unmount, stop subscribing.
+	onDestroy(unsubscribe);
 }
+// Expose the state and the login/logout functionality.
 setContext(USER, authentication);
 </script>
 

package/dist/components/BookPreview.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import EmbedNode from "../models/chapter/EmbedNode";
-import Parser from "../models/chapter/Parser";
+<script lang="ts">import EmbedNode from "../models/chapter/EmbedNode.js";
+import Parser from "../models/chapter/Parser.js";
 import ChapterBody from "./chapter/ChapterBody.svelte";
 import Embed from "./chapter/Embed.svelte";
 import Link from "./app/Link.svelte";
@@ -10,8 +10,8 @@ let authors = $derived(book.getAuthors());
 let description = $derived(book.getDescription());
 let subdomain = $derived(book.getSubdomain());
 let title = $derived(book.getTitle());
-let embed = $derived(cover === null ? null : Parser.parseEmbed(void 0, cover));
-let url = $derived(subdomain === null || write ? refID === void 0 ? "" : (write ? "/write/" : "/") + refID : `/${subdomain}`);
+let embed = $derived(cover === null ? null : Parser.parseEmbed(undefined, cover));
+let url = $derived(subdomain === null || write ? refID === undefined ? "" : (write ? "/write/" : "/") + refID : `/${subdomain}`);
 </script>
 
 <article class="book-preview">

package/dist/components/BookPreview.svelte.d.ts

@@ -1,4 +1,4 @@
-import type Book from '../models/book/Book';
+import type Book from '../models/book/Book.js';
 interface Props {
     book: Book;
     write?: boolean;

package/dist/components/Link.svelte

@@ -2,18 +2,25 @@
 let { to, linked = true, children } = $props();
 let link = $state();
 function scroll(event) {
-  if (link === void 0) return;
-  const hash = new URL(link.href).hash;
-  if (hash === "") return;
-  event.preventDefault();
-  const anchorId = new URL(link.href).hash.replace("#", "");
-  const anchor = document.getElementById(anchorId);
-  if (anchor === null) return;
-  window.scrollTo({
-    top: anchor.offsetTop,
-    behavior: "smooth"
-  });
-  history.pushState({}, "", hash);
+	// No element? Bail.
+	if (link === undefined) return;
+	// No hash? No scroll.
+	const hash = new URL(link.href).hash;
+	if (hash === "") return;
+	// Prevent the browser from scrolling.
+	event.preventDefault();
+	// Get the anchor
+	const anchorId = new URL(link.href).hash.replace("#", "");
+	const anchor = document.getElementById(anchorId);
+	// No anchor? Bail.
+	if (anchor === null) return;
+	// Scroll to the anchor.
+	window.scrollTo({
+		top: anchor.offsetTop,
+		behavior: "smooth"
+	});
+	// Update the hash (without scrolling)
+	history.pushState({}, "", hash);
 }
 </script>
 

package/dist/components/app/Button.svelte

@@ -1,11 +1,4 @@
-<script lang="ts">let {
-  type = null,
-  tooltip,
-  disabled = false,
-  command,
-  class: classes,
-  children
-} = $props();
+<script lang="ts">let { type = null, tooltip, disabled = false, command, class: classes, children } = $props();
 </script>
 
 <button

package/dist/components/app/Link.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">import { page } from "$app/state";
-let {
-  to,
-  before = void 0,
-  title = void 0,
-  external = false,
-  children
-} = $props();
+let { to, before = undefined, title = undefined, external = false, children } = $props();
 let at = $derived(to === page.url.pathname);
 </script>
 

package/dist/components/app/Options.svelte

@@ -1,9 +1,4 @@
-<script lang="ts">let {
-  options,
-  changed,
-  value = $bindable(),
-  label
-} = $props();
+<script lang="ts">let { options, changed, value = $bindable(), label } = $props();
 </script>
 
 <select bind:value onchange={() => changed(value)} aria-label={label}>

package/dist/components/app/TextInput.svelte

@@ -1,13 +1,7 @@
-<script lang="ts">let {
-  text = $bindable(""),
-  autocomplete = null,
-  type,
-  placeholder,
-  disabled
-} = $props();
+<script lang="ts">let { text = $bindable(""), autocomplete = null, type, placeholder, disabled } = $props();
 let input = $state();
 export function value() {
-  return text;
+	return text;
 }
 </script>
 

package/dist/components/chapter/Atom.svelte

@@ -1,6 +1,7 @@
-<script lang="ts">import { getCaret } from "../page/Contexts";
+<script lang="ts">import { getCaret } from "../page/Contexts.js";
 let { node, children } = $props();
 let caret = getCaret();
+// Is the caret on this link?
 let selected = $derived($caret && $caret.range && $caret.range.start.node === node);
 </script>
 

package/dist/components/chapter/Atom.svelte.d.ts

@@ -1,4 +1,4 @@
-import type AtomNode from '../../models/chapter/AtomNode';
+import type AtomNode from '../../models/chapter/AtomNode.js';
 interface Props {
     node: AtomNode<any>;
     children?: import('svelte').Snippet;

package/dist/components/chapter/Block.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">import CalloutNode from "../../models/chapter/CalloutNode";
-import CodeNode from "../../models/chapter/CodeNode";
-import EmbedNode from "../../models/chapter/EmbedNode";
-import ErrorNode from "../../models/chapter/ErrorNode";
-import ListNode from "../../models/chapter/ListNode";
-import ParagraphNode from "../../models/chapter/ParagraphNode";
-import QuoteNode from "../../models/chapter/QuoteNode";
-import RuleNode from "../../models/chapter/RuleNode";
-import TableNode from "../../models/chapter/TableNode";
+<script lang="ts">import CalloutNode from "../../models/chapter/CalloutNode.js";
+import CodeNode from "../../models/chapter/CodeNode.js";
+import EmbedNode from "../../models/chapter/EmbedNode.js";
+import ErrorNode from "../../models/chapter/ErrorNode.js";
+import ListNode from "../../models/chapter/ListNode.js";
+import ParagraphNode from "../../models/chapter/ParagraphNode.js";
+import QuoteNode from "../../models/chapter/QuoteNode.js";
+import RuleNode from "../../models/chapter/RuleNode.js";
+import TableNode from "../../models/chapter/TableNode.js";
 import Callout from "./Callout.svelte";
 import CaptionedCode from "./CaptionedCode.svelte";
 import Embed from "./Embed.svelte";

package/dist/components/chapter/Block.svelte.d.ts

@@ -1,4 +1,4 @@
-import type BlockNode from '../../models/chapter/BlockNode';
+import type BlockNode from '../../models/chapter/BlockNode.js';
 interface Props {
     node: BlockNode;
 }

package/dist/components/chapter/Callout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CalloutNode from '../../models/chapter/CalloutNode';
+import type CalloutNode from '../../models/chapter/CalloutNode.js';
 interface Props {
     node: CalloutNode;
 }

package/dist/components/chapter/CaptionedCode.svelte

@@ -7,6 +7,7 @@ import Button from "../app/Button.svelte";
 let { node } = $props();
 let language = $derived(node.getLanguage());
 let editable = isChapterEditable();
+// const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
 let editing = $state(true);
 </script>
 

package/dist/components/chapter/CaptionedCode.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CodeNode from '../../models/chapter/CodeNode';
+import type CodeNode from '../../models/chapter/CodeNode.js';
 interface Props {
     node: CodeNode;
 }

package/dist/components/chapter/ChapterBody.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import ParagraphNode from "../../models/chapter/ParagraphNode";
+<script lang="ts">import ParagraphNode from "../../models/chapter/ParagraphNode.js";
 import { writable } from "svelte/store";
 import { setContext, untrack } from "svelte";
 import { ROOT } from "../page/Contexts";
@@ -8,10 +8,13 @@ import Problem from "./Problem.svelte";
 let { node, placeholder = "", editable = false } = $props();
 let errors = $derived(node.getErrors());
 let blocks = $derived(node.getBlocks());
+// Make this chapter node available to all children in a reactive store.
+// The store is deliberately seeded with the initial node (untracked);
+// the effect below keeps it in sync when the prop changes.
 let root = writable(untrack(() => node));
 setContext(ROOT, root);
 $effect.pre(() => {
-  root.set(node);
+	root.set(node);
 });
 </script>
 

package/dist/components/chapter/ChapterBody.svelte.d.ts

@@ -1,4 +1,4 @@
-import type ChapterNode from '../../models/chapter/ChapterNode';
+import type ChapterNode from '../../models/chapter/ChapterNode.js';
 interface Props {
     node: ChapterNode;
     placeholder?: string;

package/dist/components/chapter/ChapterBody.test.js

@@ -2,10 +2,10 @@ import { beforeAll, expect, test, vi } from 'vitest';
 import { render } from '@testing-library/svelte';
 import { tick } from 'svelte';
 import { writable } from 'svelte/store';
-import Parser from '../../models/chapter/Parser';
-import Chapter from '../../models/book/Chapter';
+import Parser from '../../models/chapter/Parser.js';
+import Chapter from '../../models/book/Chapter.js';
 import ChapterBody from './ChapterBody.svelte';
-import { CARET, CHAPTER, EDITION } from '../page/Contexts';
+import { CARET, CHAPTER, EDITION } from '../page/Contexts.js';
 // The page state only exists inside a running SvelteKit app; Contexts.ts
 // reads it to decide whether a route is editable.
 vi.mock('$app/state', () => ({

package/dist/components/chapter/Citations.svelte

@@ -7,23 +7,24 @@ let { node } = $props();
 let chapter = getChapter();
 let edition = getEdition();
 let root = getRoot();
-let citations = $derived(
-  node.getMeta().sort((a, b) => {
-    if ($root === void 0) return 0;
-    let aNumber = $root.getCitationNumber(a);
-    let bNumber = $root.getCitationNumber(b);
-    if (aNumber === null) {
-      if (bNumber === null) return 0;
-      else return 1;
-    } else {
-      if (bNumber === null) return -1;
-      else return aNumber - bNumber;
-    }
-  })
-);
+// Sort citations numerically, however they're numbered.
+let citations = $derived(node.getMeta().sort((a, b) => {
+	if ($root === undefined) return 0;
+	let aNumber = $root.getCitationNumber(a);
+	let bNumber = $root.getCitationNumber(b);
+	if (aNumber === null) {
+		if (bNumber === null) return 0;
+		else return 1;
+	} else {
+		if (bNumber === null) return -1;
+		else return aNumber - bNumber;
+	}
+}));
+// Whenever anything that affects these citations' rendered size or
+// position changes, request a chapter-wide marginal layout pass.
 $effect(() => {
-  void citations;
-  $chapter?.requestLayout();
+	void citations;
+	$chapter?.requestLayout();
 });
 </script>
 

package/dist/components/chapter/Citations.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CitationsNode from '../../models/chapter/CitationsNode';
+import type CitationsNode from '../../models/chapter/CitationsNode.js';
 interface Props {
     node: CitationsNode;
 }

package/dist/components/chapter/Code.svelte

@@ -1,22 +1,16 @@
 <script lang="ts">import Prism from "./ExtendedPrism";
-let {
-  editable,
-  inline,
-  nodeID,
-  edited = void 0,
-  language = void 0,
-  code
-} = $props();
+let { editable, inline, nodeID, edited = undefined, language = undefined, code } = $props();
 let element = $state(null);
+// Whenever the code or language changes, re-highlight the element.
 $effect(() => {
-  void code;
-  void language;
-  if (element) {
-    Prism.highlightElement(element);
-  }
+	void code;
+	void language;
+	if (element) {
+		Prism.highlightElement(element);
+	}
 });
 function handleChange() {
-  if (element && edited) edited(element.innerText);
+	if (element && edited) edited(element.innerText);
 }
 </script>
 

package/dist/components/chapter/Comment.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">import Atom from "./Atom.svelte";
 import Marginal from "./Marginal.svelte";
 import Format from "./Format.svelte";
-import {
-  getChapter,
-  isChapterEditable,
-  getCaret,
-  getRoot
-} from "../page/Contexts";
+import { getChapter, isChapterEditable, getCaret, getRoot } from "../page/Contexts.js";
 import Icon from "../editor/Icon.svelte";
 import CommentIcon from "../editor/icons/comment.svg?raw";
 let { node } = $props();
@@ -14,13 +9,13 @@ let chapter = getChapter();
 let editable = isChapterEditable();
 let root = getRoot();
 let caret = getCaret();
-let focused = $derived(
-  $caret && $caret.range && node.contains($caret.range.start.node)
-);
+let focused = $derived($caret && $caret.range && node.contains($caret.range.start.node));
+// Whenever anything that affects this comment's rendered size or
+// position changes, request a chapter-wide marginal layout pass.
 $effect(() => {
-  void node;
-  void focused;
-  $chapter?.requestLayout();
+	void node;
+	void focused;
+	$chapter?.requestLayout();
 });
 </script>
 

package/dist/components/chapter/Comment.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CommentNode from '../../models/chapter/CommentNode';
+import type CommentNode from '../../models/chapter/CommentNode.js';
 interface Props {
     node: CommentNode;
 }

package/dist/components/chapter/Definition.svelte

@@ -1,25 +1,24 @@
-<script lang="ts">import Parser from "../../models/chapter/Parser";
+<script lang="ts">import Parser from "../../models/chapter/Parser.js";
 import Text from "./Text.svelte";
 import Format from "./Format.svelte";
 import Marginal from "./Marginal.svelte";
 import Problem from "./Problem.svelte";
-import {
-  getChapter,
-  getEdition,
-  isChapterEditable
-} from "../page/Contexts";
+import { getChapter, getEdition, isChapterEditable } from "../page/Contexts";
 let { node } = $props();
 let editable = isChapterEditable();
 let edition = getEdition();
 let chapter = getChapter();
+// Find the definition.
 let glossaryID = $derived(node.getMeta());
 let phrase = $derived(node.getText());
 let glossary = $derived($edition?.getGlossary() ?? {});
 let entry = $derived(glossary[glossaryID]);
+// Whenever anything that affects this definition's rendered size or
+// position changes, request a chapter-wide marginal layout pass.
 $effect(() => {
-  void phrase;
-  void entry;
-  $chapter?.requestLayout();
+	void phrase;
+	void entry;
+	$chapter?.requestLayout();
 });
 </script>
 

package/dist/components/chapter/Definition.svelte.d.ts

@@ -1,4 +1,4 @@
-import type DefinitionNode from '../../models/chapter/DefinitionNode';
+import type DefinitionNode from '../../models/chapter/DefinitionNode.js';
 interface Props {
     node: DefinitionNode;
 }

package/dist/components/chapter/Embed.svelte

@@ -1,87 +1,67 @@
-<script lang="ts">import { storage } from "../../models/Firebase";
-import {
-  getCaret,
-  getBook,
-  getBase,
-  isEditionEditable
-} from "../page/Contexts";
+<script lang="ts">import { getCaret, getBook, getBase, isEditionEditable } from "../page/Contexts.js";
 import Figure from "./Figure.svelte";
 import { getContext } from "svelte";
-let {
-  node,
-  editable = true,
-  placeholder = "",
-  imageOnly = false
-} = $props();
+let { node, editable = true, placeholder = "", imageOnly = false } = $props();
 let url = $derived(node.getURL());
 let description = $derived(node.getDescription());
 let caret = getCaret();
 let book = getBook();
 let base = getBase();
 let editionEditable = isEditionEditable();
+// Bookish editor should have passed down a way to set the active editor.
 let claimCaret = getContext("claimeditor");
 let dragging = $state(false);
-let dragFeedback = $state(void 0);
+let dragFeedback = $state(undefined);
 let imageError = $state(false);
 $effect.pre(() => {
-  if (node) imageError = false;
+	if (node) imageError = false;
 });
 function handleDrop(event) {
-  event.preventDefault();
-  if (event.dataTransfer?.items) {
-    const imageFiles = [...event.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter(
-      (file) => file !== null && /.*\.(jpg|jpeg|png)/i.test(file.name)
-    );
-    if (imageFiles.length === 0)
-      dragFeedback = "Only JPEG or PNG images are allowed.";
-    else if (imageFiles.length > 1)
-      dragFeedback = "Only one image at a time please!";
-    else {
-      dragFeedback = "Uploading\u2026";
-      const file = imageFiles[0];
-      const media = $book?.getMedia();
-      if (file === null) return;
-      if (storage === void 0) return;
-      if (media === void 0) return;
-      media.upload(
-        file,
-        (progress) => dragFeedback = `${progress}% done`,
-        (error) => {
-          dragFeedback = error;
-          dragging = false;
-        },
-        (url2, thumbnails) => {
-          $caret?.edit(
-            node,
-            node.withURLs(url2, thumbnails).withDescription("")
-          );
-          dragging = false;
-          dragFeedback = void 0;
-        }
-      );
-    }
-  }
+	event.preventDefault();
+	if (event.dataTransfer?.items) {
+		// Get the files and convert them to file opens, then filter by allowed file extensions
+		const imageFiles = [...event.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => file !== null && /.*\.(jpg|jpeg|png)/i.test(file.name));
+		if (imageFiles.length === 0) dragFeedback = "Only JPEG or PNG images are allowed.";
+		else if (imageFiles.length > 1) dragFeedback = "Only one image at a time please!";
+		else {
+			dragFeedback = "Uploading…";
+			const file = imageFiles[0];
+			const media = $book?.getMedia();
+			if (file === null) return;
+			if (media === undefined) return;
+			media.upload(file, (progress) => dragFeedback = `${progress}% done`, (error) => {
+				dragFeedback = error;
+				dragging = false;
+			}, (url, thumbnails) => {
+				// Upload completed successfully, now we can get the download URL
+				$caret?.edit(node, node.withURLs(url, thumbnails).withDescription(""));
+				dragging = false;
+				dragFeedback = undefined;
+			});
+		}
+	}
 }
 function handleDrag(event) {
-  event?.preventDefault();
-  dragging = true;
-  dragFeedback = "Drop to upload\u2026";
-  if (claimCaret) claimCaret();
+	event?.preventDefault();
+	dragging = true;
+	dragFeedback = "Drop to upload…";
+	// If we have a way to claim the caret, claim it, since we want to be able to make an edit with the active caret.
+	if (claimCaret) claimCaret();
 }
 function handleDragLeave(event) {
-  if (event.target !== event.currentTarget) return;
-  event?.preventDefault();
-  dragging = false;
-  dragFeedback = void 0;
+	if (event.target !== event.currentTarget) return;
+	event?.preventDefault();
+	dragging = false;
+	dragFeedback = undefined;
 }
 function handleLoad() {
-  imageError = false;
+	imageError = false;
 }
 function handleError() {
-  imageError = true;
+	imageError = true;
 }
 function handleClick() {
-  if (claimCaret) claimCaret();
+	if (claimCaret) claimCaret();
 }
 </script>
 
@@ -134,7 +114,7 @@ function handleClick() {
                     frameBorder="0"
                     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                     allowFullScreen
-></iframe>
+                ></iframe>
             </article>
         {:else}
             <img

package/dist/components/chapter/Embed.svelte.d.ts

@@ -1,4 +1,4 @@
-import type EmbedNode from '../../models/chapter/EmbedNode';
+import type EmbedNode from '../../models/chapter/EmbedNode.js';
 interface Props {
     node: EmbedNode;
     editable?: boolean;

package/dist/components/chapter/ErrorMessage.svelte.d.ts

@@ -1,4 +1,4 @@
-import type ErrorNode from '../../models/chapter/ErrorNode';
+import type ErrorNode from '../../models/chapter/ErrorNode.js';
 interface Props {
     node: ErrorNode;
 }