bookish-press 0.4.232 → 0.5.0

package/{components → 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, 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';
@@ -20,20 +20,17 @@ 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 = 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
@@ -69,7 +66,10 @@ onMount(() => {
     };
     // Lay things out when the window or scroll changes.
     window.addEventListener('scroll', handleScroll);
-    window.addEventListener('resize', handleResize);
+    // When the chapter view 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.
+    const resize = new ResizeObserver(() => layoutMarginals());
+    resize.observe(document.body);
     // Remember the scroll position before a refresh.
     // We have to do all of these because browser support varies.
     window.addEventListener('beforeunload', rememberPosition);
@@ -99,7 +99,7 @@ onMount(() => {
     // On cleanup, unsubscribe from everything above.
     return () => {
         window.removeEventListener('scroll', handleScroll);
-        window.removeEventListener('resize', handleResize);
+        resize.unobserve(document.body);
         // Stop listening to page visibility changes.
         window.removeEventListener('beforeunload', rememberPosition);
         window.removeEventListener('visibilitychange', rememberPosition);
@@ -156,11 +156,15 @@ function scrollToLastLocation() {
         }
     }
 }
+/** Account for static builds, where location isn't defined */
+function getLocation() {
+    return typeof location === 'undefined' ? undefined : location;
+}
 function getHighlightedWord() {
-    return location.search.split('&')[0]?.split('=')[1] ?? undefined;
+    return getLocation()?.search.split('&')[0]?.split('=')[1] ?? undefined;
 }
 function getHighlightedNumber() {
-    const number = location.search.split('&')[1]?.split('=')[1];
+    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.
@@ -169,17 +173,22 @@ $: chapterNumber = $edition?.getChapterNumber(chapterID);
 $: chapterSection = $edition?.getChapterSection(chapterID);
 $: chapterAST = $edition ? chapter.getAST($edition) : undefined;
 $: citations = chapterAST ? chapterAST.getCitations() : undefined;
-$: editionNumber =
-    $book && $edition ? $edition.getEditionNumber($book) : undefined;
+$: editionNumber = $edition ? $edition.getEditionNumber() : undefined;
 let chapterStore = writable();
 setContext(CHAPTER, chapterStore);
 $: chapterStore.set({
-    chapter: chapter,
+    chapter,
     highlightedWord: getHighlightedWord(),
-    highlightedID: highlightedID,
-    marginal: marginal,
-    layoutMarginals: layoutMarginals,
+    highlightedID,
+    marginal,
+    layoutMarginals,
 });
+let editable = isBookEditable() ||
+    isEditionEditable() ||
+    isChapterEditable() ||
+    ($auth !== undefined &&
+        $auth.user !== null &&
+        chapter.isEditor($auth.user.uid));
 </script>
 
 {#if $edition}
@@ -188,6 +197,8 @@ $: chapterStore.set({
         title={`${$edition.getTitle()} - ${chapter.getTitle()}`}
     >
         <Header
+            editable={isChapterEditable()}
+            id={chapter.id}
             header={chapter.getTitle()}
             label="Chapter title"
             tags={$edition.getTags()}
@@ -201,7 +212,7 @@ $: chapterStore.set({
             <!-- Collapse the outline if a marginal is selected. -->
             <Outline
                 slot="outline"
-                collapse={marginal !== undefined}
+                collapse={$marginal !== undefined}
                 previous={$edition.getPreviousChapterID(chapterID)}
                 next={$edition.getNextChapterID(chapterID)}
                 listener={(expanded) => {
@@ -216,20 +227,24 @@ $: chapterStore.set({
             <svelte:fragment slot="before">
                 {#if editable && $book}
                     <Muted>
-                        <TextEditor
+                        <em>bookish.press/book/</em><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);
+                                    setChapter(
+                                        edition,
+                                        chapter,
+                                        chapter.withChapterID(newChapterID)
+                                    );
                                     // Navigate to the new ID
                                     goto(
-                                        `/write/${$book.ref.id}/${editionNumber}/${newChapterID}`
+                                        `/write/${$book.getID()}/${editionNumber}/${newChapterID}`
                                     );
                                 }
                             }}
-                            placeholder="chapter ID"
+                            placeholder="chapter name"
                             valid={(newChapterID) =>
                                 !/^[a-zA-Z0-9]+$/.test(newChapterID)
                                     ? 'Chapter IDs must be one or more letters or numbers'
@@ -266,6 +281,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 +297,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 +311,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 +324,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} />
@@ -327,7 +346,7 @@ $: chapterStore.set({
                             class={'bookish-reference'}
                             id={'ref-' + citationID}
                         >
-                            <PossibleReference node={refs[citationID]} />
+                            <PossibleReference node={refs[citationID]} edit />
                         </li>
                     {:else}
                         <li
@@ -340,12 +359,32 @@ $: 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}
 
 <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;

package/{components → package/components}/page/Contexts.d.ts

@@ -6,28 +6,39 @@ 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';
+import type ChapterNode from '../../models/chapter/ChapterNode';
 export type DarkModeStore = Writable<boolean>;
 export declare const DARK_MODE: unique symbol;
 export declare function getDarkMode(): DarkModeStore;
-export type AuthStore = Writable<Authentication | undefined>;
-export declare const AUTH: unique symbol;
-export declare function getAuth(): AuthStore;
+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;
+export type RootStore = Writable<ChapterNode>;
+export declare const ROOT: unique symbol;
+export declare function getRoot(): RootStore;
 /**
  * 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 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 +47,8 @@ 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 const EDITORS: unique symbol;
+export type EditorsStore = Writable<Map<string, string>>;
+export declare function getEditors(): EditorsStore;
+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/package/components/page/Contexts.js

@@ -0,0 +1,144 @@
+// 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);
+}
+export const ROOT = Symbol('root');
+export function getRoot() {
+    return getContext(ROOT);
+}
+/**
+ * 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));
+}
+function isRouteWrite() {
+    return get(page).route.id?.startsWith('/(app)/write') ?? false;
+}
+export function isChapterEditable() {
+    if (!isRouteWrite())
+        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 (!isRouteWrite())
+        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 (!isRouteWrite())
+        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 (!isRouteWrite())
+        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 const EDITORS = Symbol('editors');
+export function getEditors() {
+    return getContext(EDITORS);
+}
+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 → 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 { 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 = 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";
                     }}
@@ -66,21 +66,22 @@ $: syns = definition.synonyms || [];
                 >{/if}
             {#if editable}
                 <ConfirmButton
-                    tooltip="delete entry {definition.phrase}"
-                    commandLabel="- definition"
-                    confirmLabel="confirm"
+                    tooltip="delete definition of {definition.phrase}"
+                    confirm="remove definition?"
                     command={() =>
                         $edition
                             ? edition.set($edition.withoutDefinition(id))
-                            : undefined}
-                />
+                            : undefined}>- definition</ConfirmButton
+                >
             {/if}
         </dt>
 
         <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 +94,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 +119,7 @@ $: syns = definition.synonyms || [];
                                 <TextEditor
                                     text={syn}
                                     label={'Synonym editor.'}
-                                    placeholder="Synonym"
+                                    placeholder="synonym"
                                     valid={() => undefined}
                                     save={(text) => {
                                         const newSyns = [...syns];
@@ -149,7 +158,7 @@ $: syns = definition.synonyms || [];
 <style>
     dd {
         margin: 0;
-        margin-top: var(--bookish-paragraph-spacing);
+        margin-bottom: var(--bookish-paragraph-spacing);
     }
 
     dt {

package/{components → 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 { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
+let auth = getUser();
+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="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 → package/components}/page/Edition.svelte

@@ -2,46 +2,32 @@
 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';
+import { isDark, setDark } from '../../util/dark';
 // 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 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 = '/';
+export let base = '';
 // When the base changes, update the context.
 let baseStore = writable(base);
 $: setContext(BASE, baseStore);
 $: baseStore.set(base);
-// The book edition to render.
-export let edition;
 // 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
-);
+let darkMode = writable(isDark());
 // 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);
-    }
+    setDark($darkMode);
+    // Set the theme, whatever it is, and change it when the edition changes
+    setTheme(edition.getTheme() ?? BookishTheme);
 }
 // Set the theme on mount.
 onMount(() => {

package/{components → package/components}/page/Edition.svelte.d.ts

@@ -2,9 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type EditionModel from '../../models/book/Edition';
 declare const __propDef: {
     props: {
-        editable?: boolean | undefined;
-        base?: string | undefined;
         edition: EditionModel;
+        base?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;