bookish-press 0.4.47 → 0.4.48

package/src/lib/components/page/Chapter.svelte

@@ -1,449 +0,0 @@
-<script lang="ts">
-    import Parser from '$lib/models/chapter/Parser';
-    import type ChapterModel from '$lib/models/book/Chapter';
-    import Header from '$lib/components/page/Header.svelte';
-    import Authors from '$lib/components/page/Authors.svelte';
-    import Outline from '$lib/components/page/Outline.svelte';
-    import Page from '$lib/components/page/Page.svelte';
-    import TextEditor from '$lib/components/editor/TextEditor.svelte';
-    import BookishEditor from '$lib/components/editor/BookishEditor.svelte';
-    import Toggle from '$lib/components/editor/Toggle.svelte';
-    import Instructions from '$lib/components/page/Instructions.svelte';
-    import ChapterBody from '$lib/components/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,
-        type ChapterStore,
-        isEditionEditable,
-    } from './Contexts';
-    import { writable } from 'svelte/store';
-    import { onMount, setContext } from 'svelte';
-    import { hideOutlineIfObscured, layoutMarginals } from './margins';
-    import scrollToEyeLevel from '../../util/scrollToEyeLevel';
-    import type ChapterContext from '$lib/components/page/ChapterContext';
-    import { goto } from '$app/navigation';
-    import ChapterNode from '$lib/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: ChapterModel;
-    export let print: boolean = 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<string | undefined>(undefined);
-
-    // Keep track of which hash mark is scrolled to
-    let highlightedID: string | undefined = 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 as string);
-            // 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] as PerformanceNavigationTiming)
-                    .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<ChapterContext>();
-    setContext<ChapterStore>(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;
-        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/src/lib/components/page/ChapterContext.ts

@@ -1,13 +0,0 @@
-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/src/lib/components/page/Contexts.ts

@@ -1,176 +0,0 @@
-// We use these unique objects as keys in Svelte context in order
-// to avoid key collisions and prevent typos. This is partly
-// future-proofing, but also because getContext<Type>() isn't type safe,
-// as the resulting value is coerced to Type even if it's not that value.
-
-import { getContext } from 'svelte';
-import { get, type Writable } from 'svelte/store';
-import type Book from '../../models/book/Book';
-import type Chapter from '../../models/book/Chapter';
-import type BookSaveStatus from '../../models/book/BookSaveStatus';
-import type Edition from '../../models/book/Edition';
-import type Authentication from '../Authentication';
-import type CaretState from '../editor/CaretState';
-import type ChapterContext from './ChapterContext';
-import { page } from '$app/stores';
-import { updateLock } from '../../models/CRUD';
-import type { DocumentReference } from 'firebase/firestore';
-
-export type DarkModeStore = Writable<boolean>;
-export const DARK_MODE = Symbol('dark');
-export function getDarkMode() {
-    return getContext<DarkModeStore>(DARK_MODE);
-}
-
-export type UserStore = Writable<Authentication | undefined>;
-export const USER = Symbol('user');
-export function getUser() {
-    return getContext<UserStore>(USER);
-}
-
-export type BookStore = Writable<Book | undefined>;
-export const BOOK = Symbol('book');
-export function getBook() {
-    return getContext<BookStore>(BOOK);
-}
-
-export type EditionStore = Writable<Edition | undefined>;
-export const EDITION = Symbol('edition');
-export function getEdition() {
-    return getContext<EditionStore>(EDITION);
-}
-
-export type ChapterText = [DocumentReference, string][];
-export type ChapterTextStore = Writable<ChapterText | undefined>;
-export const CHAPTERTEXT = Symbol('chaptertext');
-export function getChapterText() {
-    return getContext<ChapterTextStore>(CHAPTERTEXT);
-}
-
-export type ChapterStore = Writable<ChapterContext>;
-export const CHAPTER = Symbol('chapter');
-export function getChapter() {
-    return getContext<ChapterStore>(CHAPTER);
-}
-
-/**
- * Update the edition that contains the chapter, then update the
- * global edition store with the new edition, propogating the changes everywhere.
- */
-export function setChapter(
-    store: EditionStore,
-    previous: Chapter,
-    chapter: Chapter
-) {
-    const edition = get(store);
-    if (edition) store.set(edition.withRevisedChapter(previous, chapter));
-}
-
-export function isChapterEditable(): boolean {
-    if (!get(page).route.id?.startsWith('/write')) return false;
-    const auth = get(getUser());
-    const chapter = get(getChapter());
-    const edition = get(getEdition());
-    const book = get(getBook());
-    return (
-        chapter !== undefined &&
-        edition !== undefined &&
-        book !== undefined &&
-        auth !== undefined &&
-        auth.user !== null &&
-        (chapter.chapter.isEditor(auth.user.uid) ||
-            edition.isEditor(auth.user.uid) ||
-            book.isEditor(auth.user.uid))
-    );
-}
-
-export function isEditionEditable(): boolean {
-    if (!get(page).route.id?.startsWith('/write')) return false;
-    const auth = get(getUser());
-    const edition = get(getEdition());
-    const book = get(getBook());
-    return (
-        edition !== undefined &&
-        book !== undefined &&
-        auth !== undefined &&
-        auth.user !== null &&
-        (edition.isEditor(auth.user.uid) || book.isEditor(auth.user.uid))
-    );
-}
-
-export function isEditionPartiallyEditable(): boolean {
-    if (!get(page).route.id?.startsWith('/write')) return false;
-    const auth = get(getUser());
-    const edition = get(getEdition());
-    return (
-        edition !== undefined &&
-        auth !== undefined &&
-        auth.user !== null &&
-        edition.isChapterEditor(auth.user.uid)
-    );
-}
-
-export function isBookEditable(): boolean {
-    if (!get(page).route.id?.startsWith('/write')) return false;
-    const auth = get(getUser());
-    const book = get(getBook());
-    return (
-        book !== undefined &&
-        auth !== undefined &&
-        auth.user !== null &&
-        book.isEditor(auth.user.uid)
-    );
-}
-
-export const BASE = Symbol('base');
-export type BaseStore = Writable<string>;
-export function getBase() {
-    return getContext<BaseStore>(BASE);
-}
-
-export const CARET = Symbol('caret');
-export function getCaret() {
-    return getContext<Writable<CaretState | undefined>>(CARET);
-}
-
-export const STATUS = Symbol('status');
-export type StatusStore = Writable<BookSaveStatus>;
-export function getStatus() {
-    return getContext<StatusStore>(STATUS);
-}
-
-export async function lease(
-    authStore: UserStore,
-    editionStore: EditionStore,
-    contentID: string,
-    lock: boolean
-): Promise<boolean> {
-    const edition = get(editionStore);
-    const auth = get(authStore);
-    if (edition && auth && auth.user) {
-        await updateLock(edition, auth.user.uid, contentID, lock);
-        const latestEdition = get(editionStore);
-        const latestAuth = get(authStore);
-        if (latestEdition && latestAuth && latestAuth.user) {
-            editionStore.set(
-                latestEdition.withLock(latestAuth.user.uid, contentID, lock)
-            );
-            return true;
-        } else return false;
-    } else return false;
-}
-
-export function getLeasee(
-    authStore: UserStore,
-    editionStore: EditionStore,
-    contentID: string
-): string | boolean {
-    const edition = get(editionStore);
-    const auth = get(authStore);
-    if (edition !== undefined && auth !== undefined && auth.user !== null) {
-        const leasee = edition.getLeasee(contentID);
-        if (leasee === undefined) return false;
-        else if (leasee === auth.user.uid) return true;
-        else return leasee;
-    } else return false;
-}