bookish-press 0.4.47 → 0.4.49

package/components/page/BookLoader.svelte

@@ -0,0 +1,59 @@
+<script>import Loading from './Loading.svelte';
+import Feedback from '../app/Feedback.svelte';
+import { onDestroy } from 'svelte';
+import { page } from '$app/stores';
+import { getBook, getUser } from './Contexts';
+import { listenToBookWithID as listenToBooksWithID, listenToBooksByName as listenToBooksWithName, } from '../../models/CRUD';
+let auth = getUser();
+let book = getBook();
+// Keep track of the query updates
+let booksByName = undefined;
+let bookByID = undefined;
+// Mege them together here
+$: currentBook =
+    // Neither loaded? Current book isn't loaded.
+    booksByName === undefined && bookByID === undefined
+        ? undefined
+        : booksByName !== undefined && booksByName.length > 0
+            ? booksByName[0]
+            : bookByID ?? null;
+// Whenever the merge changes, update the book store (updating the whole UI)
+$: book.set(currentBook ?? undefined);
+// Keep track of listeners to unsubscribe to on page changes.
+let nameUnsub = undefined;
+let idUnsub = undefined;
+function unsub() {
+    if (nameUnsub)
+        nameUnsub();
+    if (idUnsub)
+        idUnsub();
+}
+// Keep track of any errors.
+let error;
+function listen() {
+    unsub();
+    try {
+        nameUnsub = listenToBooksWithName($page.params.bookid, (books) => (booksByName = books));
+        idUnsub = listenToBooksWithID($page.params.bookid, (book) => (bookByID = book));
+    }
+    catch (err) {
+        error = '' + err;
+    }
+}
+// When page or auth changes and there's a user, update the listener.
+$: if ($page && $auth && $auth.user !== null)
+    listen();
+// When this is unmounted, unset them.
+onDestroy(() => {
+    book.set(undefined);
+    unsub();
+});
+</script>
+
+{#if error || currentBook === null}
+    <Feedback error>Unable to load book.</Feedback>
+{:else if currentBook === undefined}
+    <Loading />
+{:else}
+    <slot />
+{/if}

package/components/page/BookLoader.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BookLoaderProps = typeof __propDef.props;
+export type BookLoaderEvents = typeof __propDef.events;
+export type BookLoaderSlots = typeof __propDef.slots;
+export default class BookLoader extends SvelteComponentTyped<BookLoaderProps, BookLoaderEvents, BookLoaderSlots> {
+}
+export {};

package/components/page/BulkReferenceEditor.svelte

@@ -0,0 +1,63 @@
+<script>import Instructions from './Instructions.svelte';
+import { getUniqueReferenceID, mineReference, } from '../../util/mineReference';
+import Reference from '../../models/book/Reference';
+import { getEdition, isEditionEditable, isEditionPartiallyEditable, } from './Contexts';
+import Button from '../app/Button.svelte';
+let edition = getEdition();
+let text = '';
+let editable = isEditionEditable() || isEditionPartiallyEditable();
+function handleBulkAdd() {
+    // Split by lines, skipping empty lines.
+    const references = text
+        .split(/\n+/)
+        .map((line) => mineReference(Object.keys($edition?.getReferences() ?? []), line));
+    if ($edition) {
+        edition.set($edition.withNewReferences(references));
+        text = '';
+    }
+}
+function handleEmptyAdd() {
+    if ($edition) {
+        edition.set($edition.withNewReferences([
+            new Reference(getUniqueReferenceID(Object.keys($edition.getReferences()))),
+        ]));
+    }
+}
+</script>
+
+<Instructions {editable}>
+    To add references to a chapter, add them here first. You can add one at a
+    time, or try pasting them in bulk, and this page will try to pull out author
+    lists, years, sources, and URLs. Be sure to verify it though &mdash; it's
+    likely to get some things wrong.
+</Instructions>
+
+<textarea rows={5} bind:value={text} style="width: 100%" />
+<Button
+    tooltip="convert to references"
+    disabled={text.length === 0}
+    command={handleBulkAdd}>+ bulk references</Button
+>
+<Button tooltip="add empty reference" command={handleEmptyAdd}
+    >+ reference</Button
+>
+
+<style>
+    textarea {
+        width: 100%;
+        padding: var(--app-chrome-padding);
+        font-family: var(--app-font);
+        font-size: var(--app-font-size);
+        border: none;
+        border-top: var(--app-chrome-border-size) solid var(--app-border-color);
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+        margin-bottom: var(--app-chrome-padding);
+    }
+
+    textarea:focus {
+        border-bottom-color: var(--app-interactive-color);
+        border-top-color: var(--app-interactive-color);
+        outline: none;
+    }
+</style>

package/components/page/BulkReferenceEditor.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BulkReferenceEditorProps = typeof __propDef.props;
+export type BulkReferenceEditorEvents = typeof __propDef.events;
+export type BulkReferenceEditorSlots = typeof __propDef.slots;
+export default class BulkReferenceEditor extends SvelteComponentTyped<BulkReferenceEditorProps, BulkReferenceEditorEvents, BulkReferenceEditorSlots> {
+}
+export {};

package/components/page/Chapter.svelte

@@ -0,0 +1,393 @@
+<script>import Parser from '../../models/chapter/Parser';
+import Header from './Header.svelte';
+import Authors from './Authors.svelte';
+import Outline from './Outline.svelte';
+import Page from './Page.svelte';
+import TextEditor from '../editor/TextEditor.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Toggle from '../editor/Toggle.svelte';
+import Instructions from './Instructions.svelte';
+import ChapterBody from '../chapter/ChapterBody.svelte';
+import PossibleReference from './PossibleReference.svelte';
+import ChapterNumber from './ChapterNumber.svelte';
+import Problem from '../chapter/Problem.svelte';
+import { CHAPTER, getUser, getBook, getEdition, isBookEditable, isChapterEditable, isEditionPartiallyEditable, getLeasee, lease, setChapter, isEditionEditable, } from './Contexts';
+import { writable } from 'svelte/store';
+import { onMount, setContext } from 'svelte';
+import { hideOutlineIfObscured, layoutMarginals } from './margins';
+import scrollToEyeLevel from '../../util/scrollToEyeLevel';
+import { goto } from '$app/navigation';
+import ChapterNode from '../../models/chapter/ChapterNode';
+import Muted from './Muted.svelte';
+import Title from './Title.svelte';
+import PageHeader from './PageHeader.svelte';
+import Permissions from '../editor/Permissions.svelte';
+export let chapter;
+export let print = false;
+let book = getBook();
+let edition = getEdition();
+let auth = getUser();
+// Keep track of the scroll position to facilitate reading during reloads.
+function rememberPosition() {
+    localStorage.setItem('scrollposition', '' + window.scrollY);
+}
+// When the window resizes, the responsive layout might cause the marginals to move to the footer.
+// when this happens, we want to immediately remove all of the explicit positioning.
+function handleResize() {
+    layoutMarginals();
+}
+// The currently selected marginal; we only do one at a time.
+let marginal = writable(undefined);
+// Keep track of which hash mark is scrolled to
+let highlightedID = undefined;
+// When this component is mounted...
+// 1) Subscribe and unsubscribe to window listeners
+// 2) Do initial layout of marginals
+// 3) Start observing any elements corresponding to the ID in the URL's hash string
+// 4) Clean up our mess after unmounting.
+onMount(() => {
+    // On render or when scrolling, see if the URL hash has changed and update state accordingly.
+    // We also track whether we've scrolled to it.
+    const observeHash = () => {
+        // Get the ID without the hash and the corresponding element
+        const elementID = window.location.hash.substring(1);
+        const element = elementID
+            ? document.getElementById(elementID)
+            : null;
+        // If it's not empty, observe it, and remember what we're observing for highlighting
+        if (element) {
+            highlightedID = elementID;
+            // Start watching this a few seconds after we see it, giving the for in-page scrolling.
+            setTimeout(() => observer.observe(element), 2500);
+        }
+    };
+    // Do things to do when scrolling
+    const handleScroll = () => {
+        // See if the outline is obscured by an image
+        hideOutlineIfObscured();
+        // See if there are any new hashes to observe. This is because
+        // we're using react-router-hash-link, which doesn't trigger hashchange events for some reason.
+        observeHash();
+    };
+    // Lay things out when the window or scroll changes.
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+    // Remember the scroll position before a refresh.
+    // We have to do all of these because browser support varies.
+    window.addEventListener('beforeunload', rememberPosition);
+    window.addEventListener('visibilitychange', rememberPosition);
+    window.addEventListener('pagehide', rememberPosition);
+    // Start listening for hash changes, since we want to remove them upon scrolling away from them.
+    window.addEventListener('pushstate', observeHash);
+    window.addEventListener('popstate', observeHash);
+    window.addEventListener('hashchange', observeHash);
+    // Make an intersection observer to monitor the location of elements selected by the URL hash ID.
+    const observer = new IntersectionObserver((entries) => {
+        // Go through all of the monitored elements
+        entries.forEach((entry) => {
+            // If the observed element is out of view and in the hash, remove the hash
+            if (entry.intersectionRatio === 0 &&
+                entry.target.id === window.location.hash.substring(1)) {
+                history.pushState('', document.title, window.location.pathname + window.location.search);
+                observer.unobserve(entry.target);
+                highlightedID = undefined;
+            }
+        });
+    });
+    // Do an initial check the hash to see if there's an ID to scroll to
+    observeHash();
+    // Position the marginals, since there's new content.
+    layoutMarginals();
+    // On cleanup, unsubscribe from everything above.
+    return () => {
+        window.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('resize', handleResize);
+        // Stop listening to page visibility changes.
+        window.removeEventListener('beforeunload', rememberPosition);
+        window.removeEventListener('visibilitychange', rememberPosition);
+        window.removeEventListener('pagehide', rememberPosition);
+        // Delete the remembered position so that the next page scrolls to top.
+        localStorage.removeItem('scrollposition');
+        // Stop listening for hash changes
+        window.removeEventListener('pushstate', observeHash);
+        window.removeEventListener('popstate', observeHash);
+        window.removeEventListener('hashchange', observeHash);
+        // Stop observing everything on unmount
+        observer.disconnect();
+    };
+});
+// Position the marginals on mount.
+onMount(() => layoutMarginals());
+// This gets called after the page is done loading. There are various things we scroll to.
+function scrollToLastLocation() {
+    // In case loading changed marginal positions
+    layoutMarginals();
+    // If there's a word we're trying to highlight in the URL path, scroll to the corresponding match.
+    if (location.search) {
+        const highlights = document.getElementsByClassName('bookish-text bookish-content-highlight');
+        const num = getHighlightedNumber();
+        if (num &&
+            highlights.length > 0 &&
+            num < highlights.length &&
+            num >= 0) {
+            scrollToEyeLevel(highlights[num]);
+        }
+    }
+    // Otherwise, if there's an ID in the URL, jump to it.
+    else if (highlightedID) {
+        const el = document.getElementById(highlightedID);
+        // If we found the element, remove the hash any time after a few seconds. See handleScroll for the removal logic.
+        if (el) {
+            scrollToEyeLevel(el);
+        }
+    }
+    else {
+        // If we got to this page through a refresh, scroll to
+        const entries = performance.getEntriesByType('navigation');
+        const position = localStorage.getItem('scrollposition');
+        if (position !== null &&
+            entries.length > 0 &&
+            entries[entries.length - 1]
+                .type === 'reload') {
+            // Scroll to the previous position, if there was one, so that refresh preserves position.
+            window.scrollTo(0, parseInt(position));
+        }
+        // Otherwise, just scroll to the top.
+        else {
+            window.scrollTo(0, 0);
+        }
+    }
+}
+/** Account for static builds, where location isn't defined */
+function getLocation() {
+    return typeof location === 'undefined' ? undefined : location;
+}
+function getHighlightedWord() {
+    return getLocation()?.search.split('&')[0]?.split('=')[1] ?? undefined;
+}
+function getHighlightedNumber() {
+    const number = getLocation()?.search.split('&')[1]?.split('=')[1];
+    return number === undefined ? undefined : parseInt(number);
+}
+// Prepare to render the chapter by getting some data from the chapter and book.
+$: chapterID = chapter.getID();
+$: chapterNumber = $edition?.getChapterNumber(chapterID);
+$: chapterSection = $edition?.getChapterSection(chapterID);
+$: chapterAST = $edition ? chapter.getAST($edition) : undefined;
+$: citations = chapterAST ? chapterAST.getCitations() : undefined;
+$: editionNumber = $edition ? $edition.getEditionNumber() : undefined;
+let chapterStore = writable();
+setContext(CHAPTER, chapterStore);
+$: chapterStore.set({
+    chapter: chapter,
+    highlightedWord: getHighlightedWord(),
+    highlightedID: highlightedID,
+    marginal: marginal,
+    layoutMarginals: layoutMarginals,
+});
+let editable = isBookEditable() ||
+    isEditionEditable() ||
+    isChapterEditable() ||
+    ($auth !== undefined &&
+        $auth.user !== null &&
+        chapter.isEditor($auth.user.uid));
+</script>
+
+{#if $edition}
+    <Page
+        afterLoaded={scrollToLastLocation}
+        title={`${$edition.getTitle()} - ${chapter.getTitle()}`}
+    >
+        <Header
+            editable={isChapterEditable()}
+            id={chapter.id}
+            header={chapter.getTitle()}
+            label="Chapter title"
+            tags={$edition.getTags()}
+            save={(text) =>
+                setChapter(edition, chapter, chapter.withTitle(text))}
+            getImage={() => chapter.getImage()}
+            setImage={(embed) =>
+                setChapter(edition, chapter, chapter.withImage(embed))}
+            {print}
+        >
+            <!-- Collapse the outline if a marginal is selected. -->
+            <Outline
+                slot="outline"
+                collapse={$marginal !== undefined}
+                previous={$edition.getPreviousChapterID(chapterID)}
+                next={$edition.getNextChapterID(chapterID)}
+                listener={(expanded) => {
+                    // If the outline is being expanded, hide the marginal, otherwise leave it alone.
+                    if (expanded) marginal.set(undefined);
+
+                    // Check if we need to hide the outline after positioning.
+                    hideOutlineIfObscured();
+                }}
+            />
+            <!-- Add an editable chapter ID if in editor mode -->
+            <svelte:fragment slot="before">
+                {#if editable && $book}
+                    <Muted>
+                        <TextEditor
+                            text={chapter.getID()}
+                            label="Chapter URL ID editor"
+                            save={// After the ID is edited, reload the page with the new URL.
+                            (newChapterID) => {
+                                if ($book) {
+                                    chapter.withChapterID(newChapterID);
+                                    // Navigate to the new ID
+                                    goto(
+                                        `/write/${$book.ref.id}/${editionNumber}/${newChapterID}`
+                                    );
+                                }
+                            }}
+                            placeholder="chapter ID"
+                            valid={(newChapterID) =>
+                                !/^[a-zA-Z0-9]+$/.test(newChapterID)
+                                    ? 'Chapter IDs must be one or more letters or numbers'
+                                    : chapter.getID() !== newChapterID &&
+                                      $edition?.hasChapter(newChapterID)
+                                    ? "There's already a chapter that has this ID."
+                                    : undefined}
+                            saveOnExit={true}
+                        />
+                    </Muted>
+                {/if}
+                {#if editable}
+                    <Toggle
+                        on={chapter.isNumbered()}
+                        save={(on) =>
+                            setChapter(
+                                edition,
+                                chapter,
+                                chapter.asNumbered(on)
+                            )}
+                    >
+                        <ChapterNumber
+                            >{#if chapterNumber !== undefined}Chapter {chapterNumber}{:else}<Muted
+                                    >Unnumbered</Muted
+                                >{/if}</ChapterNumber
+                        >
+                    </Toggle>
+                {:else if chapterNumber !== undefined}
+                    <ChapterNumber>Chapter {chapterNumber}</ChapterNumber>
+                {/if}
+                {#if chapterSection !== undefined && chapterSection.length > 0}
+                    <span class="section-name">{chapterSection}</span>
+                {/if}
+            </svelte:fragment>
+            <!-- If there are chapter authors, render those, otherwise use the book authors -->
+            <Authors
+                editable={isChapterEditable()}
+                slot="after"
+                authors={chapter.getAuthors()}
+                inheritedAuthors={$edition.getAuthors()}
+                add={() => setChapter(edition, chapter, chapter.withAuthor(''))}
+                edit={(index, text) =>
+                    setChapter(
+                        edition,
+                        chapter,
+                        chapter.withRenamedAuthor(index, text)
+                    )}
+                remove={(index) =>
+                    setChapter(edition, chapter, chapter.withoutAuthor(index))}
+            />
+        </Header>
+
+        <Instructions {editable}>
+            Edit your chapter's title, authors, and cover image above. You can
+            also change the ID of the chapter, which is the text that appears in
+            the chapter URL. Write your chapter text below, formatting options
+            in the toolbar above to add headers, lists, tables, comments,
+            citations, footnotes, and more. It's okay to try things, you can
+            always undo. Saves are automatic.
+        </Instructions>
+
+        <!-- Render the chapter body, passing some context -->
+        <section class="chapter-content">
+            {#if chapterAST}
+                {#if editable}
+                    <BookishEditor
+                        text={chapterAST.toBookdown()}
+                        parser={(text) => Parser.parseChapter($edition, text)}
+                        save={(ast) =>
+                            ast instanceof ChapterNode
+                                ? setChapter(
+                                      edition,
+                                      chapter,
+                                      chapter.withAST(ast)
+                                  )
+                                : undefined}
+                        chapter={true}
+                        autofocus
+                        component={ChapterBody}
+                        placeholder="write here"
+                        leasee={getLeasee(auth, edition, chapter.id)}
+                        lease={(lock) => lease(auth, edition, chapter.id, lock)}
+                    />
+                {:else}
+                    <ChapterBody node={chapterAST} />
+                {/if}
+            {:else}
+                <span>Loading...</span>
+            {/if}
+        </section>
+
+        {#if citations && citations.size > 0}
+            {@const refs = $edition.getReferences()}
+            <Title>References</Title>
+            <ol>
+                {#each [...citations].sort() as citationID}
+                    {#if citationID in refs}
+                        <li
+                            class={'bookish-reference'}
+                            id={'ref-' + citationID}
+                        >
+                            <PossibleReference node={refs[citationID]} />
+                        </li>
+                    {:else}
+                        <li
+                            ><Problem
+                                >Unknown reference: <code>{citationID}</code
+                                ></Problem
+                            ></li
+                        >
+                    {/if}
+                {/each}
+            </ol>
+        {/if}
+
+        {#if editable || isEditionPartiallyEditable()}
+            <PageHeader>Editors</PageHeader>
+            <Instructions {editable}
+                >These authors can edit this chapter. Add an email here to
+                provide chapter-level edit permissions.</Instructions
+            >
+
+            <Permissions
+                uids={chapter.uids}
+                inheriteduids={Array.from(
+                    new Set([...$edition.uids, ...($book ? $book.uids : [])])
+                )}
+                atleastone={false}
+                writable={isChapterEditable()}
+                change={(uids) =>
+                    setChapter(edition, chapter, chapter.withEditors(uids))}
+            />
+        {/if}
+    </Page>
+{/if}
+
+<style>
+    .section-name {
+        display: inline-block;
+        margin-left: 0.5em;
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-small-font-size);
+        font-weight: normal;
+        font-style: normal;
+        color: var(--bookish-muted-color);
+        line-height: 1em;
+    }
+</style>

package/components/page/Chapter.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type ChapterModel from '../../models/book/Chapter';
+declare const __propDef: {
+    props: {
+        chapter: ChapterModel;
+        print?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChapterProps = typeof __propDef.props;
+export type ChapterEvents = typeof __propDef.events;
+export type ChapterSlots = typeof __propDef.slots;
+export default class Chapter extends SvelteComponentTyped<ChapterProps, ChapterEvents, ChapterSlots> {
+}
+export {};

package/components/page/ChapterContext.d.ts

@@ -0,0 +1,10 @@
+import type { Writable } from 'svelte/store';
+import type Chapter from '../../models/book/Chapter';
+type ChapterContext = {
+    chapter: Chapter;
+    highlightedWord?: string;
+    highlightedID?: string;
+    marginal: Writable<string | undefined>;
+    layoutMarginals: () => void;
+} | undefined;
+export default ChapterContext;

package/components/page/ChapterContext.js

@@ -0,0 +1 @@
+export {};

package/components/page/ChapterNumber.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ChapterNumberProps */
+/** @typedef {typeof __propDef.events}  ChapterNumberEvents */
+/** @typedef {typeof __propDef.slots}  ChapterNumberSlots */
+export default class ChapterNumber extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ChapterNumberProps = typeof __propDef.props;
+export type ChapterNumberEvents = typeof __propDef.events;
+export type ChapterNumberSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/{src/lib/components → components}/page/ChapterTitle.svelte

@@ -1,7 +1,5 @@
-<script lang="ts">
-    import Link from '../Link.svelte';
-
-    export let link: string | undefined = undefined;
+<script>import Link from '../Link.svelte';
+export let link = undefined;
 </script>
 
 {#if link}

package/components/page/ChapterTitle.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ChapterTitleProps = typeof __propDef.props;
+export type ChapterTitleEvents = typeof __propDef.events;
+export type ChapterTitleSlots = typeof __propDef.slots;
+export default class ChapterTitle extends SvelteComponentTyped<ChapterTitleProps, ChapterTitleEvents, ChapterTitleSlots> {
+}
+export {};