bookish-press 0.4.22 → 0.4.24

package/components/page/Chapter.svelte

@@ -11,7 +11,7 @@ import ChapterBody from '../chapter/ChapterBody.svelte';
 import PossibleReference from './PossibleReference.svelte';
 import ChapterNumber from './ChapterNumber.svelte';
 import Problem from '../chapter/Problem.svelte';
-import { CHAPTER, getBook, getEdition, isEditable, setChapter, } from './Contexts';
+import { CHAPTER, getAuth, 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';
@@ -20,11 +20,13 @@ 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 editable = isEditable();
+let auth = getAuth();
 // Keep track of the scroll position to facilitate reading during reloads.
 function rememberPosition() {
     localStorage.setItem('scrollposition', '' + window.scrollY);
@@ -170,7 +172,7 @@ $: chapterSection = $edition?.getChapterSection(chapterID);
 $: chapterAST = $edition ? chapter.getAST($edition) : undefined;
 $: citations = chapterAST ? chapterAST.getCitations() : undefined;
 $: editionNumber =
-    $book && $edition ? $edition.getEditionNumber($book) : undefined;
+    $book && $edition ? $edition.getEditionNumber() : undefined;
 let chapterStore = writable();
 setContext(CHAPTER, chapterStore);
 $: chapterStore.set({
@@ -180,6 +182,12 @@ $: chapterStore.set({
     marginal: marginal,
     layoutMarginals: layoutMarginals,
 });
+let editable = isBookEditable() ||
+    isEditionEditable() ||
+    isChapterEditable() ||
+    ($auth !== undefined &&
+        $auth.user !== null &&
+        chapter.isEditor($auth.user.uid));
 </script>
 
 {#if $edition}
@@ -188,6 +196,8 @@ $: chapterStore.set({
         title={`${$edition.getTitle()} - ${chapter.getTitle()}`}
     >
         <Header
+            editable={isChapterEditable()}
+            id={chapter.id}
             header={chapter.getTitle()}
             label="Chapter title"
             tags={$edition.getTags()}
@@ -266,6 +276,7 @@ $: chapterStore.set({
             </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()}
@@ -281,13 +292,13 @@ $: chapterStore.set({
             />
         </Header>
 
-        <Instructions>
+        <Instructions {editable}>
             Edit your chapter's title, authors, and cover image above. You can
-            also change the ID of the chapter, which appears in it's URL. Write
-            your chapter text below, using the many formatting options in the
-            toolbar above to format text, add headers, lists, tables, comments,
+            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, each time you stop typing.
+            always undo. Saves are automatic.
         </Instructions>
 
         <!-- Render the chapter body, passing some context -->
@@ -295,7 +306,8 @@ $: chapterStore.set({
             {#if chapterAST}
                 {#if editable}
                     <BookishEditor
-                        ast={chapterAST}
+                        text={chapterAST.toBookdown()}
+                        parser={(text) => Parser.parseChapter($edition, text)}
                         save={(ast) =>
                             ast instanceof ChapterNode
                                 ? setChapter(
@@ -307,7 +319,9 @@ $: chapterStore.set({
                         chapter={true}
                         autofocus
                         component={ChapterBody}
-                        placeholder="Type here"
+                        placeholder="write here"
+                        leasee={getLeasee(auth, edition, chapter.id)}
+                        lease={(lock) => lease(auth, edition, chapter.id, lock)}
                     />
                 {:else}
                     <ChapterBody node={chapterAST} />
@@ -340,6 +354,25 @@ $: chapterStore.set({
                 {/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}
 

package/components/page/Contexts.d.ts

@@ -6,6 +6,7 @@ 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;
@@ -18,6 +19,10 @@ 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;
@@ -26,8 +31,10 @@ export declare function getChapter(): ChapterStore;
  * global edition store with the new edition, propogating the changes everywhere.
  */
 export declare function setChapter(store: EditionStore, previous: Chapter, chapter: Chapter): void;
-export declare const EDITABLE: unique symbol;
-export declare function isEditable(): boolean;
+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;
@@ -36,3 +43,5 @@ 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: AuthStore, editionStore: EditionStore, contentID: string, lock: boolean): Promise<boolean>;
+export declare function getLeasee(authStore: AuthStore, editionStore: EditionStore, contentID: string): string | boolean;

package/components/page/Contexts.js

@@ -4,6 +4,8 @@
 // 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);
@@ -20,6 +22,10 @@ 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);
@@ -33,9 +39,53 @@ export function setChapter(store, previous, chapter) {
     if (edition)
         store.set(edition.withRevisedChapter(previous, chapter));
 }
-export const EDITABLE = Symbol('editable');
-export function isEditable() {
-    return getContext(EDITABLE);
+export function isChapterEditable() {
+    if (!get(page).route.id?.startsWith('/write'))
+        return false;
+    const auth = get(getAuth());
+    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(getAuth());
+    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(getAuth());
+    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(getAuth());
+    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() {
@@ -49,3 +99,35 @@ 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/components/page/DefinitionView.svelte

@@ -5,12 +5,13 @@ import BookishEditor from '../editor/BookishEditor.svelte';
 import Format from '../chapter/Format.svelte';
 import Note from '../editor/Note.svelte';
 import { afterUpdate } from 'svelte';
-import { getEdition, isEditable } from './Contexts';
+import { getAuth, getEdition, getLeasee, isChapterEditable, lease, } from './Contexts';
 import Button from '../app/Button.svelte';
 export let id;
 export let definition;
+let auth = getAuth();
 let edition = getEdition();
-let editable = isEditable();
+let editable = isChapterEditable();
 // Focus after adding a new synonym.
 let newSynonym = false;
 let synonymsEditor = null;
@@ -25,7 +26,6 @@ afterUpdate(() => {
         newSynonym = false;
     }
 });
-$: format = Parser.parseFormat(undefined, definition.definition).withTextIfEmpty();
 function addSynonym() {
     if ($edition) {
         edition.set($edition.withEditedDefinition(id, {
@@ -46,7 +46,7 @@ $: syns = definition.synonyms || [];
                 <TextEditor
                     text={definition.phrase}
                     label={'Glossary phrase editor.'}
-                    placeholder="Phrase"
+                    placeholder="phrase"
                     valid={(text) => {
                         if (text.length === 0) return "phrase can't be empty";
                     }}
@@ -80,7 +80,9 @@ $: syns = definition.synonyms || [];
         <dd class="term">
             {#if editable && edition}
                 <BookishEditor
-                    ast={format}
+                    text={definition.definition}
+                    parser={(text) =>
+                        Parser.parseFormat(undefined, text).withTextIfEmpty()}
                     save={(node) =>
                         $edition
                             ? edition.set(
@@ -93,12 +95,20 @@ $: syns = definition.synonyms || [];
                             : undefined}
                     chapter={false}
                     component={Format}
-                    placeholder="write a definition"
+                    placeholder="definition"
+                    leasee={getLeasee(auth, edition, `definition-${id}`)}
+                    lease={(lock) =>
+                        lease(auth, edition, `definition-${id}`, lock)}
                 />
             {:else if definition.definition === ''}
                 <em>Definition</em>
             {:else}
-                <Format node={format} />
+                <Format
+                    node={Parser.parseFormat(
+                        undefined,
+                        definition.definition
+                    ).withTextIfEmpty()}
+                />
             {/if}
             {#if edition && editable}
                 <span bind:this={synonymsEditor}>
@@ -110,7 +120,7 @@ $: syns = definition.synonyms || [];
                                 <TextEditor
                                     text={syn}
                                     label={'Synonym editor.'}
-                                    placeholder="Synonym"
+                                    placeholder="synonym"
                                     valid={() => undefined}
                                     save={(text) => {
                                         const newSyns = [...syns];

package/components/page/Description.svelte

@@ -1,19 +1,18 @@
 <script>import Parser from '../../models/chapter/Parser';
 import ChapterBody from '../chapter/ChapterBody.svelte';
 import BookishEditor from '../editor/BookishEditor.svelte';
-import { getEdition, isEditable } from './Contexts';
-let editable = isEditable();
+import { getAuth, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
+let auth = getAuth();
+let editable = isEditionEditable();
 let edition = getEdition();
-$: descriptionNode = $edition
-    ? Parser.parseChapter($edition, $edition.getDescription())
-    : undefined;
 </script>
 
-{#if descriptionNode}
+{#if $edition}
     <section class="bookish-description">
         {#if editable}
             <BookishEditor
-                ast={descriptionNode}
+                text={$edition.getDescription()}
+                parser={(text) => Parser.parseChapter($edition, text)}
                 save={(node) =>
                     $edition
                         ? edition.set(
@@ -22,10 +21,14 @@ $: descriptionNode = $edition
                         : undefined}
                 chapter={false}
                 component={ChapterBody}
-                placeholder="What is this book about?"
+                placeholder="book description"
+                leasee={getLeasee(auth, edition, `description`)}
+                lease={(lock) => lease(auth, edition, `description`, lock)}
             />
         {:else}
-            <ChapterBody node={descriptionNode} />
+            <ChapterBody
+                node={Parser.parseChapter($edition, $edition.getDescription())}
+            />
         {/if}
     </section>
 {/if}

package/components/page/Edition.svelte

@@ -2,14 +2,10 @@
 import { goto } from '$app/navigation';
 import { onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
-import { BASE, DARK_MODE, EDITABLE, } from './Contexts';
+import { BASE, DARK_MODE, } from './Contexts';
 import { BookishTheme } from '../../models/book/Theme';
 // Poly fill smooth scrolling for Safari.
 onMount(() => smoothscroll.polyfill());
-// True if the edition should be editable. Distributed as context.
-export let editable = false;
-// When editable changes, update the context.
-$: setContext(EDITABLE, editable);
 // 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
@@ -32,18 +28,24 @@ let darkMode = writable(typeof localStorage !== 'undefined' &&
 setContext(DARK_MODE, darkMode);
 // When dark mode changes, update the body's class list.
 $: {
-    if ($darkMode)
-        document.body.classList.add('dark');
-    else
-        document.body.classList.remove('dark');
-    if (typeof localStorage !== 'undefined')
-        localStorage.setItem('dark', $darkMode ? 'true' : 'false');
+    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('#', ''));
-// Set the theme, whatever it is, and change it when the edition changes.
-$: setTheme(edition.getTheme() ?? BookishTheme);
 /** 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.

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

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 import type EditionModel from '../../models/book/Edition';
 declare const __propDef: {
     props: {
-        editable?: boolean | undefined;
         base?: string | undefined;
         edition: EditionModel;
     };

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, getAuth, CHAPTERTEXT, getChapterText, } from './Contexts';
+import { onDestroy } from 'svelte';
+import { page } from '$app/stores';
+import { listenToChapters, listenToEdition } from '../../models/CRUD';
+export let write;
+let auth = getAuth();
+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 {};