bookish-press 0.4.23 → 0.4.25

package/components/editor/BookishEditor.svelte

@@ -16,17 +16,19 @@ import EmbedNode from '../../models/chapter/EmbedNode';
 import ErrorNode from '../../models/chapter/ErrorNode';
 import { caretRangeToIndexRange, indexRangeToCaretRange, } from '../../models/chapter/Caret';
 import commands from './Commands';
-import { getEdition } from '../page/Contexts';
 import { afterUpdate, onMount, setContext } from 'svelte';
 import { getCaret } from '../page/Contexts';
 import CaretView from './CaretView.svelte';
 const IDLE_TIME = 500;
-export let ast;
+export let text;
+export let parser;
 export let save;
 export let chapter;
 export let autofocus = false;
 export let component;
 export let placeholder;
+export let leasee;
+export let lease;
 let element = null;
 let caretRange = undefined;
 let caretCoordinate = undefined;
@@ -36,10 +38,19 @@ let editorFocused = false;
 let undoStack = [];
 let undoPosition = -1;
 let clipboard = undefined;
-let editedNode = ast;
 let ignoredInput = false;
-let edition = getEdition();
 let activeEditor = getCaret();
+let editedNode;
+$: {
+    // Note: when the text changes externally, the caret will be lost. We either have
+    // to implement fancy operational transform revision control for collaborative editing
+    // or a basic chapter locking strategy to avoid data loss. I went with locking for maintenance simplicity,
+    // but it would be nice to implement operational transform in the future.
+    if (editedNode === undefined || editedNode.toBookdown() !== text) {
+        editedNode = parser(text);
+    }
+}
+$: locked = typeof leasee === 'string';
 onMount(() => {
     const caret = editedNode.getFirstCaret();
     if (caret)
@@ -357,17 +368,11 @@ function undo() {
     // Grab the next state
     let undoState = undoStack[undoPosition + 1];
     // Restore the content of the chapter.
-    let node = ast instanceof ChapterNode
-        ? Parser.parseChapter($edition, undoState.bookdown)
-        : ast instanceof FormatNode
-            ? Parser.parseFormat($edition, undoState.bookdown)
-            : ast instanceof EmbedNode
-                ? Parser.parseEmbed($edition, undoState.bookdown)
-                : undefined;
+    let node = parser(undoState.bookdown);
     if (node === undefined || node instanceof ErrorNode)
         return;
     // Restore the view
-    editedNode = node;
+    updateRoot(node);
     // Save the undo.
     save(node);
     // Move the undo state down a position.
@@ -383,16 +388,10 @@ function redo() {
     // Grab the next state
     let undoState = undoStack[undoPosition - 1];
     // Restore the content of the chapter.
-    let node = ast instanceof ChapterNode
-        ? Parser.parseChapter($edition, undoState.bookdown)
-        : ast instanceof FormatNode
-            ? Parser.parseFormat($edition, undoState.bookdown)
-            : ast instanceof EmbedNode
-                ? Parser.parseEmbed($edition, undoState.bookdown)
-                : undefined;
+    let node = parser(undoState.bookdown);
     if (node === undefined)
         return;
-    editedNode = node;
+    updateRoot(node);
     // Move the undo state down a position.
     if (undoPosition > 0)
         undoPosition = undoPosition - 1;
@@ -588,6 +587,9 @@ function executeCommand(command, key) {
     return false;
 }
 async function saveEdit(newRoot, newRange, command) {
+    // Don't save edits if locked.
+    if (locked)
+        return;
     // Call the save callback.
     save(newRoot);
     // Initialize a new history if we don't have one.
@@ -605,7 +607,7 @@ async function saveEdit(newRoot, newRange, command) {
             ];
     }
     // Change the chapter's AST.
-    editedNode = newRoot;
+    updateRoot(newRoot);
     // Set the new undo stack, pre-pending the new command to the front.
     const newTextRange = caretRangeToIndexRange(newRoot, newRange);
     if (newTextRange !== undefined)
@@ -626,6 +628,10 @@ async function saveEdit(newRoot, newRange, command) {
     // Update the caret
     claimActiveEditor();
 }
+function updateRoot(newRoot) {
+    editedNode = newRoot;
+    text = editedNode.toBookdown();
+}
 function editNode(previous, edited) {
     if (caretRange) {
         const newRoot = editedNode.withNodeReplaced(previous, edited);
@@ -663,8 +669,13 @@ function isFocused() {
         (element !== null && element?.contains(document.activeElement)) ||
         toolbarIsFocused());
 }
-function updateFocus() {
+function handleFocus() {
+    editorFocused = isFocused();
+    lease(true);
+}
+function handleBlur() {
     editorFocused = isFocused();
+    lease(false);
 }
 function handleCopy(node) {
     // Set the editor's clipboard.
@@ -793,16 +804,23 @@ setContext('claimeditor', claimActiveEditor);
 
 <div
     class={`bookish-editor ${inAtom ? 'bookish-editor-atom-focused' : ''}`}
+    class:locked
+    aria-disabled={locked}
     bind:this={element}
     on:keydown={handleKey}
     on:keypress={handlePress}
     on:mousedown|stopPropagation={handleMouseDown}
-    on:focus={updateFocus}
-    on:blur={updateFocus}
+    on:focus={handleFocus}
+    on:blur={handleBlur}
     tabIndex="0"
 >
-    <!-- The chapter content -->
-    <svelte:component this={component} node={editedNode} {placeholder} />
+    <!-- A view of the root -->
+    <svelte:component
+        this={component}
+        node={editedNode}
+        {placeholder}
+        editable={true}
+    />
     <!-- The caret. We render our own since this view isn't contentEditable and we can't show a caret.
          Customize the rendering based on the formatting applied to the text node. -->
     {#if caretCoordinate && caretRange && !isAtom && isSelection === false && editorFocused}
@@ -815,14 +833,19 @@ setContext('claimeditor', claimActiveEditor);
             linked={isLink}
             bold={isBold}
             italic={isItalic}
-            disabled={!editorFocused}
+            disabled={!editorFocused || locked}
+            {locked}
         />
     {/if}
 </div>
 
 <style>
     .bookish-editor {
-        min-height: 2em;
+        min-height: 1em;
+    }
+
+    .locked :global(.bookish-text) {
+        color: var(--app-muted-color);
     }
 
     .bookish-editor:focus {

package/components/editor/BookishEditor.svelte.d.ts

@@ -2,12 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import type RootNode from '../../models/chapter/RootNode';
 declare const __propDef: {
     props: {
-        ast: RootNode;
+        text: string;
+        parser: (text: string) => RootNode;
         save: (node: RootNode) => Promise<void> | void;
         chapter: boolean;
         autofocus?: boolean | undefined;
         component: ConstructorOfATypedSvelteComponent;
         placeholder: string;
+        leasee: string | boolean;
+        lease: (lock: boolean) => Promise<boolean> | boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/editor/CaretView.svelte

@@ -8,6 +8,7 @@ export let bold;
 export let disabled;
 export let ignored;
 export let blink;
+export let locked;
 let element;
 let headerHeight = 0;
 // When the caret updates, make sure it's in view.
@@ -32,7 +33,8 @@ afterUpdate(() => {
     style:height="{height}px"
     style:scroll-margin-top="{headerHeight}px"
     bind:this={element}
-/>
+    >{#if locked}🔒{/if}</div
+>
 
 <style>
     .caret {

package/components/editor/CaretView.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         disabled: boolean;
         ignored: boolean;
         blink: boolean;
+        locked: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/editor/ConfirmButton.svelte

@@ -43,7 +43,7 @@ function execute() {
 </Button>
 
 <style>
-    :global(button.bookish-editor-confirm) {
+    :global(bookish-editor-confirm) {
         animation: failure 100ms infinite;
     }
 </style>

package/components/editor/Note.svelte

@@ -4,6 +4,7 @@
     span {
         font-size: small;
         font-style: italic;
+        font-weight: normal;
         color: var(--app-muted-color);
     }
 </style>

package/components/editor/Permissions.svelte

@@ -0,0 +1,95 @@
+<script>import { createUser, getUserEmails } from '../../models/CRUD';
+import Button from '../app/Button.svelte';
+import TextInput from '../app/TextInput.svelte';
+import Note from './Note.svelte';
+export let uids;
+export let inheriteduids;
+export let writable;
+export let atleastone;
+export let change;
+let emails = null;
+$: alluids = Array.from(new Set([...uids, ...inheriteduids]));
+async function getEmails(userIDs) {
+    emails = await getUserEmails(userIDs);
+}
+$: {
+    if (emails === null ||
+        (emails.size > 0 &&
+            Array.from(emails.keys()).join() !== alluids.join()))
+        getEmails(alluids);
+}
+let newEditor = '';
+let newEditorError = null;
+let loading = undefined;
+async function addEditor() {
+    const email = newEditor;
+    newEditor = '';
+    loading = email;
+    try {
+        const uid = await createUser(email);
+        if (uid === null)
+            newEditorError = "couldn't add editor";
+        else
+            change([...uids, uid]);
+    }
+    finally {
+        loading = undefined;
+    }
+}
+</script>
+
+{#if emails === null}
+    Loading editors...
+{:else}
+    <section class="emails">
+        {#if writable}
+            <form on:submit|preventDefault={addEditor}>
+                <TextInput
+                    type="email"
+                    placeholder="email"
+                    bind:text={newEditor}
+                    disabled={false}
+                />
+                <Button
+                    tooltip="give {newEditor} editing rights"
+                    disabled={newEditor.length === 0 ||
+                        Array.from(emails.values()).includes(newEditor)}
+                    command={addEditor}>+ editor</Button
+                >
+                {#if newEditorError !== null}{newEditorError}{/if}
+            </form>
+        {/if}
+
+        {#each uids as uid, index (uid)}
+            {@const email = emails.get(uid)}
+            <p>
+                {email}
+                {#if writable}
+                    <Button
+                        tooltip="remove {email} editing rights"
+                        command={() =>
+                            change([
+                                ...uids.slice(0, index),
+                                ...uids.slice(index + 1),
+                            ])}
+                        disabled={atleastone && uids.length <= 1}>x</Button
+                    >
+                {/if}
+            </p>
+        {/each}
+        {#each inheriteduids as uid}
+            <p><em>{emails.get(uid)}</em> <Note>book editor</Note></p>
+        {/each}
+        {#if loading}
+            <p>
+                adding {loading}
+            </p>
+        {/if}
+    </section>
+{/if}
+
+<style>
+    p {
+        font-family: var(--app-font);
+    }
+</style>

package/components/editor/Permissions.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        uids: string[];
+        inheriteduids: string[];
+        writable: boolean;
+        atleastone: boolean;
+        change: (uids: string[]) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PermissionsProps = typeof __propDef.props;
+export type PermissionsEvents = typeof __propDef.events;
+export type PermissionsSlots = typeof __propDef.slots;
+export default class Permissions extends SvelteComponentTyped<PermissionsProps, PermissionsEvents, PermissionsSlots> {
+}
+export {};

package/components/editor/Toolbar.svelte

@@ -239,7 +239,6 @@ function handleKeyPress(event) {
         flex-wrap: wrap;
         align-items: baseline;
         background: var(--bookish-background-color);
-        padding: var(--app-chrome-padding);
         font-family: var(--app-font);
         font-size: var(--app-chrome-font-size);
     }

package/components/editor/ToolbarGroup.svelte

@@ -10,7 +10,6 @@ export let icon;
 <style>
     .toolbar-group {
         display: inline-block;
-        padding-bottom: var(--app-chrome-padding);
         margin-right: calc(2 * var(--app-chrome-padding));
     }
 

package/components/page/Acknowledgements.svelte

@@ -2,37 +2,39 @@
 import ChapterBody from '../chapter/ChapterBody.svelte';
 import BookishEditor from '../editor/BookishEditor.svelte';
 import Instructions from './Instructions.svelte';
-import { getEdition, isEditable } from './Contexts';
+import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
 import PageHeader from './PageHeader.svelte';
+let auth = getUser();
 let edition = getEdition();
-let editable = isEditable();
+let editable = isEditionEditable();
 $: acknowledgements = $edition?.getAcknowledgements();
-$: acksNode = acknowledgements
-    ? Parser.parseChapter($edition, acknowledgements)
-    : undefined;
 </script>
 
-<Instructions>
-    This section is not shown if empty. But surely you have someone to thank!
+<Instructions {editable}>
+    Do you have people, communities, or institutions to thank? Do it here. This
+    section is not shown if empty.
 </Instructions>
 
 <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
-{#if $edition && acknowledgements && acksNode}
+{#if $edition && acknowledgements}
     {#if editable}
         <BookishEditor
-            ast={acksNode}
+            text={acknowledgements}
+            parser={(text) => Parser.parseChapter($edition, text)}
             chapter={false}
             component={ChapterBody}
             placeholder="Who would you like to thank?"
             save={(node) =>
                 $edition
                     ? edition.set(
-                          $edition.setAcknowledgements(node.toBookdown())
+                          $edition.withAcknowledgements(node.toBookdown())
                       )
                     : undefined}
+            leasee={getLeasee(auth, edition, `acks`)}
+            lease={(lock) => lease(auth, edition, `acks`, lock)}
         />
     {:else if acknowledgements.length > 0}
         <PageHeader id="acknowledgements">Acknowledgements</PageHeader>
-        <ChapterBody node={acksNode} />
+        <ChapterBody node={Parser.parseChapter($edition, acknowledgements)} />
     {/if}
 {/if}

package/components/page/Authors.svelte

@@ -2,15 +2,15 @@
 import TextEditor from '../editor/TextEditor.svelte';
 import Format from '../chapter/Format.svelte';
 import { afterUpdate } from 'svelte';
-import { getEdition, isEditable } from './Contexts';
+import { getEdition, isBookEditable, isEditionEditable } from './Contexts';
 import Note from '../editor/Note.svelte';
 import Button from '../app/Button.svelte';
+export let editable;
 export let authors;
 export let inheritedAuthors = undefined;
 export let add;
 export let edit;
 export let remove;
-let editable = isEditable();
 let edition = getEdition();
 let authorList = null;
 let newAuthor = false;
@@ -47,7 +47,7 @@ afterUpdate(() => {
                 <TextEditor
                     text={author}
                     label={'Author name editor'}
-                    placeholder="Author"
+                    placeholder="author"
                     valid={() => undefined}
                     save={(text) =>
                         /* If text is already empty, remove */ author.length >
@@ -66,9 +66,7 @@ afterUpdate(() => {
         {/each}
     {/if}
     {#if editable}
-        &nbsp;<Button tooltip="Add an author" command={addAuthor}
-            >+ author</Button
-        >
+        &nbsp;<Button tooltip="add author" command={addAuthor}>+ author</Button>
     {/if}
 </p>
 
@@ -76,7 +74,6 @@ afterUpdate(() => {
     .bookish-authors {
         font-family: var(--bookish-header-font-family);
         font-style: italic;
-        margin-top: 0;
-        margin-bottom: var(--bookish-paragraph-spacing);
+        margin: 0;
     }
 </style>

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        editable: boolean;
         authors: string[];
         inheritedAuthors?: string[] | undefined;
         add: () => Promise<void> | void;

package/components/page/BookLoader.svelte

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

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

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

package/components/page/BulkReferenceEditor.svelte

@@ -1,10 +1,11 @@
 <script>import Instructions from './Instructions.svelte';
 import { getUniqueReferenceID, mineReference, } from '../../util/mineReference';
 import Reference from '../../models/book/Reference';
-import { getEdition } from './Contexts';
+import { getEdition, isEditionEditable, isEditionPartiallyEditable, } from './Contexts';
 import Button from '../app/Button.svelte';
 let edition = getEdition();
 let text = '';
+let editable = isEditionEditable() || isEditionPartiallyEditable();
 function handleBulkAdd() {
     // Split by lines, skipping empty lines.
     const references = text
@@ -24,17 +25,16 @@ function handleEmptyAdd() {
 }
 </script>
 
-<Instructions>
-    To cite references in a chapter, add them here. You can add one at a time,
-    or try pasting them in bulk, and we'll do our best to pull out the relevant
-    parts, looking for things that look like author lists, years, sources, and
-    URLs. Be sure to verify it though &mdash; it's likely to get some things
-    wrong!
+<Instructions {editable}>
+    To add references to a chapter, add them here first. You can add one at a
+    time, or try pasting them in bulk, and this page will try to pull out author
+    lists, years, sources, and URLs. Be sure to verify it though &mdash; it's
+    likely to get some things wrong.
 </Instructions>
 
 <textarea rows={5} bind:value={text} style="width: 100%" />
 <Button
-    tooltip="convert text to references"
+    tooltip="convert to references"
     disabled={text.length === 0}
     command={handleBulkAdd}>+ bulk references</Button
 >