bookish-press 0.4.47 → 0.4.49

package/components/page/Contexts.d.ts

@@ -0,0 +1,47 @@
+import { 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 type { DocumentReference } from 'firebase/firestore';
+export type DarkModeStore = Writable<boolean>;
+export declare const DARK_MODE: unique symbol;
+export declare function getDarkMode(): DarkModeStore;
+export type UserStore = Writable<Authentication | undefined>;
+export declare const USER: unique symbol;
+export declare function getUser(): UserStore;
+export type BookStore = Writable<Book | undefined>;
+export declare const BOOK: unique symbol;
+export declare function getBook(): BookStore;
+export type EditionStore = Writable<Edition | undefined>;
+export declare const EDITION: unique symbol;
+export declare function getEdition(): EditionStore;
+export type ChapterText = [DocumentReference, string][];
+export type ChapterTextStore = Writable<ChapterText | undefined>;
+export declare const CHAPTERTEXT: unique symbol;
+export declare function getChapterText(): ChapterTextStore;
+export type ChapterStore = Writable<ChapterContext>;
+export declare const CHAPTER: unique symbol;
+export declare function getChapter(): ChapterStore;
+/**
+ * Update the edition that contains the chapter, then update the
+ * global edition store with the new edition, propogating the changes everywhere.
+ */
+export declare function setChapter(store: EditionStore, previous: Chapter, chapter: Chapter): void;
+export declare function isChapterEditable(): boolean;
+export declare function isEditionEditable(): boolean;
+export declare function isEditionPartiallyEditable(): boolean;
+export declare function isBookEditable(): boolean;
+export declare const BASE: unique symbol;
+export type BaseStore = Writable<string>;
+export declare function getBase(): BaseStore;
+export declare const CARET: unique symbol;
+export declare function getCaret(): Writable<CaretState | undefined>;
+export declare const STATUS: unique symbol;
+export type StatusStore = Writable<BookSaveStatus>;
+export declare function getStatus(): StatusStore;
+export declare function lease(authStore: UserStore, editionStore: EditionStore, contentID: string, lock: boolean): Promise<boolean>;
+export declare function getLeasee(authStore: UserStore, editionStore: EditionStore, contentID: string): string | boolean;

package/components/page/Contexts.js

@@ -0,0 +1,133 @@
+// 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 } from 'svelte/store';
+import { page } from '$app/stores';
+import { updateLock } from '../../models/CRUD';
+export const DARK_MODE = Symbol('dark');
+export function getDarkMode() {
+    return getContext(DARK_MODE);
+}
+export const USER = Symbol('user');
+export function getUser() {
+    return getContext(USER);
+}
+export const BOOK = Symbol('book');
+export function getBook() {
+    return getContext(BOOK);
+}
+export const EDITION = Symbol('edition');
+export function getEdition() {
+    return getContext(EDITION);
+}
+export const CHAPTERTEXT = Symbol('chaptertext');
+export function getChapterText() {
+    return getContext(CHAPTERTEXT);
+}
+export const CHAPTER = Symbol('chapter');
+export function getChapter() {
+    return getContext(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, previous, chapter) {
+    const edition = get(store);
+    if (edition)
+        store.set(edition.withRevisedChapter(previous, chapter));
+}
+export function isChapterEditable() {
+    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() {
+    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() {
+    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() {
+    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 function getBase() {
+    return getContext(BASE);
+}
+export const CARET = Symbol('caret');
+export function getCaret() {
+    return getContext(CARET);
+}
+export const STATUS = Symbol('status');
+export function getStatus() {
+    return getContext(STATUS);
+}
+export async function lease(authStore, editionStore, contentID, lock) {
+    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, editionStore, contentID) {
+    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;
+}

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

@@ -1,57 +1,42 @@
-<script lang="ts">
-    import Parser from '$lib/models/chapter/Parser';
-    import type Definition from '$lib/models/book/Definition';
-    import ConfirmButton from '../editor/ConfirmButton.svelte';
-    import TextEditor from '$lib/components/editor/TextEditor.svelte';
-    import BookishEditor from '$lib/components/editor/BookishEditor.svelte';
-    import Format from '$lib/components/chapter/Format.svelte';
-    import Note from '../editor/Note.svelte';
-    import { afterUpdate } from 'svelte';
-    import {
-        getUser,
-        getEdition,
-        getLeasee,
-        isChapterEditable,
-        lease,
-    } from './Contexts';
-    import Button from '../app/Button.svelte';
-
-    export let id: string;
-    export let definition: Definition;
-
-    let auth = getUser();
-    let edition = getEdition();
-    let editable = isChapterEditable();
-
-    // Focus after adding a new synonym.
-    let newSynonym = false;
-    let synonymsEditor: HTMLSpanElement | null = null;
-
-    afterUpdate(() => {
-        if (newSynonym && synonymsEditor) {
-            const editors = synonymsEditor.querySelectorAll('input');
-            if (editors.length > 0) {
-                const last = editors[editors.length - 1];
-                if (last instanceof HTMLElement) last.focus();
-            }
-            newSynonym = false;
+<script>import Parser from '../../models/chapter/Parser';
+import ConfirmButton from '../editor/ConfirmButton.svelte';
+import TextEditor from '../editor/TextEditor.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Format from '../chapter/Format.svelte';
+import Note from '../editor/Note.svelte';
+import { afterUpdate } from 'svelte';
+import { getUser, getEdition, getLeasee, isChapterEditable, lease, } from './Contexts';
+import Button from '../app/Button.svelte';
+export let id;
+export let definition;
+let auth = getUser();
+let edition = getEdition();
+let editable = isChapterEditable();
+// Focus after adding a new synonym.
+let newSynonym = false;
+let synonymsEditor = null;
+afterUpdate(() => {
+    if (newSynonym && synonymsEditor) {
+        const editors = synonymsEditor.querySelectorAll('input');
+        if (editors.length > 0) {
+            const last = editors[editors.length - 1];
+            if (last instanceof HTMLElement)
+                last.focus();
         }
-    });
-
-    function addSynonym() {
-        if ($edition) {
-            edition.set(
-                $edition.withEditedDefinition(id, {
-                    phrase: definition.phrase,
-                    definition: definition.definition,
-                    synonyms: [...(definition.synonyms ?? []), ''],
-                })
-            );
-        }
-        newSynonym = true;
+        newSynonym = false;
     }
-
-    $: syns = definition.synonyms || [];
+});
+function addSynonym() {
+    if ($edition) {
+        edition.set($edition.withEditedDefinition(id, {
+            phrase: definition.phrase,
+            definition: definition.definition,
+            synonyms: [...(definition.synonyms ?? []), ''],
+        }));
+    }
+    newSynonym = true;
+}
+$: syns = definition.synonyms || [];
 </script>
 
 {#if $edition}
@@ -174,7 +159,7 @@
 <style>
     dd {
         margin: 0;
-        margin-top: var(--bookish-paragraph-spacing);
+        margin-bottom: var(--bookish-paragraph-spacing);
     }
 
     dt {

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type Definition from '../../models/book/Definition';
+declare const __propDef: {
+    props: {
+        id: string;
+        definition: Definition;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefinitionViewProps = typeof __propDef.props;
+export type DefinitionViewEvents = typeof __propDef.events;
+export type DefinitionViewSlots = typeof __propDef.slots;
+export default class DefinitionView extends SvelteComponentTyped<DefinitionViewProps, DefinitionViewEvents, DefinitionViewSlots> {
+}
+export {};

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

@@ -1,18 +1,10 @@
-<script lang="ts">
-    import Parser from '$lib/models/chapter/Parser';
-    import ChapterBody from '$lib/components/chapter/ChapterBody.svelte';
-    import BookishEditor from '$lib/components/editor/BookishEditor.svelte';
-    import {
-        getUser,
-        getEdition,
-        getLeasee,
-        isEditionEditable,
-        lease,
-    } from './Contexts';
-
-    let auth = getUser();
-    let editable = isEditionEditable();
-    let edition = getEdition();
+<script>import Parser from '../../models/chapter/Parser';
+import ChapterBody from '../chapter/ChapterBody.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
+let auth = getUser();
+let editable = isEditionEditable();
+let edition = getEdition();
 </script>
 
 {#if $edition}

package/components/page/Description.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 DescriptionProps = typeof __propDef.props;
+export type DescriptionEvents = typeof __propDef.events;
+export type DescriptionSlots = typeof __propDef.slots;
+export default class Description extends SvelteComponentTyped<DescriptionProps, DescriptionEvents, DescriptionSlots> {
+}
+export {};

package/components/page/Edition.svelte

@@ -0,0 +1,161 @@
+<script>import smoothscroll from 'smoothscroll-polyfill';
+import { goto } from '$app/navigation';
+import { onMount, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { BASE, DARK_MODE, } from './Contexts';
+import { BookishTheme } from '../../models/book/Theme';
+// Poly fill smooth scrolling for Safari.
+onMount(() => smoothscroll.polyfill());
+// The book edition to render.
+export let edition;
+// The base path allows links to adjust to different routing contexts in which a book is placed.
+// For example, when the book is hosted alone, all routes might start with the bare root "/",
+// but when the book is being viewed or edited in the Bookish app, it needs a prefix for the
+// route in the app.
+export let base = '';
+// When the base changes, update the context.
+let baseStore = writable(base);
+$: setContext(BASE, baseStore);
+$: baseStore.set(base);
+// Default dark mode to whatever's stored in local storage, if anything.
+// respect user choice on the website despite the system theme
+let darkMode = writable(typeof localStorage !== 'undefined' &&
+    localStorage.getItem('dark') !== 'false' &&
+    (localStorage.getItem('dark') === 'true' || // A previous setting
+        window.matchMedia('(prefers-color-scheme: dark)').matches) // Operating system is set to dark
+);
+// Expose dark mode to descendants
+setContext(DARK_MODE, darkMode);
+// When dark mode changes, update the body's class list.
+$: {
+    if (typeof document !== 'undefined') {
+        if ($darkMode)
+            document.body.classList.add('dark');
+        else
+            document.body.classList.remove('dark');
+        if (typeof localStorage !== 'undefined')
+            localStorage.setItem('dark', $darkMode ? 'true' : 'false');
+        // Set the theme, whatever it is, and change it when the edition changes
+        setTheme(edition.getTheme() ?? BookishTheme);
+    }
+}
+// Set the theme on mount.
+onMount(() => {
+    setTheme(edition.getTheme() ?? BookishTheme);
+});
+// Redirect old hash routes by simply replacing their hash before routing.
+if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
+    goto(location.hash.replace('#', ''));
+/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme.*/
+function setTheme(theme) {
+    // If the theme is being unset, make sure we've removed any overrding style declaration.
+    // This let's the default theme kick in.
+    let themeTagImports = document.getElementById('bookish-theme-imports');
+    let themeTagCSS = document.getElementById('bookish-theme');
+    // We only want to set it if it's actually different than what's currently set.
+    // Otherwise during editing we get lots of jittery changes on each edit, because the
+    // whole edition is rerendering. To check this, we set a data attribute on the style tag containing
+    // a stringify of the theme set. We do this separately for the imports, since they can have more
+    // major changes than the spacing and color sizes, changing fonts especially.
+    const themeTagCSSValue = themeTagCSS?.dataset.css;
+    const themeTagImportsValue = themeTagImports?.dataset.imports;
+    const newThemeTagCSSValue = JSON.stringify(theme);
+    const newThemeTagImportsValue = JSON.stringify(theme?.imports);
+    if (theme !== null) {
+        // If the imports changed, update theme.
+        if (themeTagImportsValue !== newThemeTagImportsValue) {
+            // If it's being set, create a new style tag.
+            const newThemeImportsTag = document.createElement('style');
+            // Give it an ID so we can remove it later.
+            newThemeImportsTag.setAttribute('id', 'bookish-theme-imports');
+            newThemeImportsTag.dataset.imports = newThemeTagImportsValue;
+            // Insert any import statements, then any rules.
+            const css = `${(theme.imports ?? [])
+                .map((url) => `@import url(${url});`)
+                .join('\n')}`;
+            newThemeImportsTag.appendChild(document.createTextNode(css));
+            document.head.appendChild(newThemeImportsTag);
+            // Remove the old tag
+            themeTagImports?.remove();
+        }
+        // If the rules changed, update them.
+        if (themeTagCSSValue !== newThemeTagCSSValue) {
+            // If it's being set, create a new style tag.
+            const newThemeCSSTag = document.createElement('style');
+            // Give it an ID so we can remove it later.
+            newThemeCSSTag.setAttribute('id', 'bookish-theme');
+            newThemeCSSTag.dataset.css = newThemeTagCSSValue;
+            // Insert any import statements, then any rules.
+            const css = `
+                    ${(theme.imports ?? [])
+                .map((url) => `@import url(${url});`)
+                .join('\n')}
+                    .bookish {
+                        ${theme.light ? toRules(theme.light) : ''}
+                        ${theme.fonts ? toRules(theme.fonts) : ''}
+                        ${theme.sizes ? toRules(theme.sizes) : ''}
+                        ${theme.weights ? toRules(theme.weights) : ''}
+                        ${theme.spacing ? toRules(theme.spacing) : ''}
+                    }
+                    .dark {
+                        ${theme.dark ? toRules(theme.dark) : ''}
+                    }`;
+            newThemeCSSTag.appendChild(document.createTextNode(css));
+            document.head.appendChild(newThemeCSSTag);
+            // Remove the old tag
+            themeTagCSS?.remove();
+        }
+    }
+    else {
+        // Remove the old tags, unsetting the theme.
+        themeTagImports?.remove();
+        themeTagCSS?.remove();
+    }
+}
+function toRules(set) {
+    return Object.keys(set)
+        .map((name) => {
+        const value = set[name];
+        if (value.length > 0) {
+            const cssVariable = '--bookish-' +
+                name
+                    .replace(/([a-z])([A-Z])/g, '$1 $2')
+                    .split(' ')
+                    .map((s) => s.toLowerCase())
+                    .join('-')
+                    .replace(/([0-9])/g, '-$1-');
+            return `${cssVariable}: ${value};`;
+        }
+    })
+        .join('\n\t\t');
+}
+</script>
+
+<main class="bookish {$darkMode ? ' dark' : ''}">
+    <slot />
+</main>
+
+<style>
+    * {
+        box-sizing: border-box;
+    }
+
+    /* WINDOW AND PAGES */
+    :global(body) {
+        margin: 0;
+        padding: 0;
+        background-color: var(--bookish-background-color);
+    }
+
+    /* The root container for a book */
+    .bookish {
+        font-weight: var(--bookish-paragraph-font-weight);
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-paragraph-font-size);
+        background-color: var(--bookish-background-color);
+        color: var(--bookish-paragraph-color);
+        width: 100%;
+        z-index: 0;
+        text-align: left;
+    }
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type EditionModel from '../../models/book/Edition';
+declare const __propDef: {
+    props: {
+        edition: EditionModel;
+        base?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EditionProps = typeof __propDef.props;
+export type EditionEvents = typeof __propDef.events;
+export type EditionSlots = typeof __propDef.slots;
+export default class Edition extends SvelteComponentTyped<EditionProps, EditionEvents, EditionSlots> {
+}
+export {};

package/components/page/EditionLoader.svelte

@@ -0,0 +1,99 @@
+<script>import Loading from './Loading.svelte';
+import Edition from './Edition.svelte';
+import Feedback from '../app/Feedback.svelte';
+import { getBook, getEdition, getUser, CHAPTERTEXT, getChapterText, } from './Contexts';
+import { onDestroy } from 'svelte';
+import { page } from '$app/stores';
+import { listenToChapters, listenToEdition } from '../../models/CRUD';
+export let write;
+let auth = getUser();
+let book = getBook();
+let edition = getEdition();
+let chapterText = getChapterText();
+let editionUnsub = undefined;
+let chaptersUnsub = undefined;
+let error = undefined;
+function unsub() {
+    // Unsubscribe to the old edition document if we were listening to one.
+    if (editionUnsub)
+        editionUnsub();
+    if (chaptersUnsub)
+        chaptersUnsub();
+}
+function listen() {
+    unsub();
+    error = undefined;
+    // If we no longer have a book, we can't get an edition.
+    if ($book === undefined) {
+        edition.set(undefined);
+        error = 'Unknown book.';
+        return;
+    }
+    else {
+        const editionNumber = $page.params.editionid;
+        const latestPublished = !write;
+        // Figure out which edition to load.
+        let editionID;
+        if (editionNumber === undefined) {
+            if (latestPublished) {
+                editionID = $book.getLatestPublishedEditionID();
+                if (editionID === undefined)
+                    error = 'There is no published edition of this book.';
+            }
+            else {
+                editionID = $book.getLatestEditionID();
+            }
+        }
+        else {
+            editionID = $book.getEditionNumberID(parseFloat(editionNumber));
+            if (editionID === undefined)
+                error = `There is no ${editionNumber} edition of this book`;
+        }
+        // Listen to the doc for changes and listen to all of its chapters.
+        if (editionID !== undefined) {
+            editionUnsub = listenToEdition($book.ref.id, editionID, (ed) => {
+                if (ed) {
+                    // Before setting the new edition, augmented it with the chapter text.
+                    edition.set($chapterText
+                        ? ed.withChapterText($chapterText)
+                        : ed);
+                }
+                else {
+                    edition.set(undefined);
+                    error = 'Unable to load edition';
+                }
+            });
+            chaptersUnsub = listenToChapters($book.ref.id, editionID, (chapters) => {
+                // Update the chapter text store.
+                chapterText.set(chapters);
+                // Update the chapter text in the current edition.
+                if ($edition)
+                    edition.set($edition.withChapterText(chapters));
+            });
+        }
+    }
+}
+// Whenever the book or page changes, change the listener.
+$: if ($page && $auth && $auth.user !== null)
+    listen();
+// When unmounted, unset the stores — no longer viewing a book.
+onDestroy(() => {
+    edition.set(undefined);
+    unsub();
+});
+</script>
+
+{#if $book === undefined || error}
+    <Feedback error>Unable to load edition.</Feedback>
+{:else if $edition === undefined}
+    <Loading />
+{:else}
+    <Edition
+        edition={$edition}
+        base={write
+            ? `/write/${$book.getRefID()}/${$edition.getEditionNumber()}`
+            : `/${$book.getSubdomain() ?? $book.getRefID()}`}
+    >
+        <slot />
+    </Edition>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        write: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EditionLoaderProps = typeof __propDef.props;
+export type EditionLoaderEvents = typeof __propDef.events;
+export type EditionLoaderSlots = typeof __propDef.slots;
+export default class EditionLoader extends SvelteComponentTyped<EditionLoaderProps, EditionLoaderEvents, EditionLoaderSlots> {
+}
+export {};