bookish-press 0.4.231 → 0.5.0

package/package/components/editor/Permissions.svelte

@@ -0,0 +1,93 @@
+<script>import { createUser } from '../../models/CRUD';
+import Button from '../app/Button.svelte';
+import TextInput from '../app/TextInput.svelte';
+import { getEditors } from '../page/Contexts';
+import Note from './Note.svelte';
+export let uids;
+export let inheriteduids;
+export let writable;
+export let atleastone;
+export let change;
+let emails = getEditors();
+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;
+    }
+}
+function hasEditor(email) {
+    const match = Array.from($emails.entries()).find(([, e]) => e === email);
+    if (match === undefined)
+        return false;
+    const uid = match[0];
+    return uids.includes(uid) || inheriteduids.includes(uid);
+}
+</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 || hasEditor(newEditor)}
+                    command={addEditor}>+ editor</Button
+                >
+                {#if hasEditor(newEditor)}<Note>already added</Note>{/if}
+                {#if newEditorError !== null}{newEditorError}{/if}
+            </form>
+        {/if}
+
+        {#each uids as uid, index (uid)}
+            {@const email = $emails.get(uid)}
+            <p>
+                {#if email}{email}{:else}<em>missing email</em>{/if}
+                {#if writable}
+                    <Button
+                        tooltip="remove {email} editing rights"
+                        command={() =>
+                            change([
+                                ...uids.slice(0, index),
+                                ...uids.slice(index + 1),
+                            ])}
+                        disabled={atleastone && uids.length <= 1}>⨉</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/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 → package/components}/editor/TextEditor.svelte

@@ -25,7 +25,7 @@ $: {
         const sizedText = showPlaceholder()
             ? placeholder
             : text.replace(/\s/g, '\u00a0');
-        // Clip the text to prevent this editor from getting too long when editing or when asked to.. If it goes past one line,
+        // Clip the text to prevent this editor from getting too long when editing. If it goes past one line,
         // the measurements and layout are way off.
         const trimmedText = width !== undefined &&
             (clip === true || status === Status.Editing)
@@ -220,12 +220,11 @@ function handleKeyPress(event) {
         margin-left: -0.5em;
         padding: 0.5em 0.5em;
         font-family: var(--app-font);
-        font-size: 80%;
+        font-size: small;
         font-weight: normal;
         font-style: normal;
         color: var(--app-error-color);
         border-radius: var(--app-chrome-roundedness);
         background: var(--app-chrome-background);
-        animation: failure 100ms 10;
     }
 </style>

package/{components → package/components}/editor/Toolbar.svelte

@@ -225,7 +225,7 @@ function handleKeyPress(event) {
         {:else if quoteNode}<ToolbarGroup icon={QuoteIcon}
                 ><QuoteEditor quote={quoteNode} /></ToolbarGroup
             >
-        {:else if embedNode}<ToolbarGroup icon={MediaIcon}
+        {:else if embedNode}<span class="break" /><ToolbarGroup icon={MediaIcon}
                 ><EmbedEditor embed={embedNode} /></ToolbarGroup
             >
         {/if}
@@ -238,10 +238,15 @@ function handleKeyPress(event) {
         flex-direction: row;
         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);
+        row-gap: var(--app-chrome-padding);
+        justify-content: left;
+    }
+
+    .break {
+        flex-basis: 100%;
+        height: 0;
     }
 
     .bookish-editor-toolbar:focus {

package/{components → 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 → package/components}/editor/URLEditor.svelte

@@ -9,5 +9,7 @@ export let edit;
     text={url}
     label="URL editor"
     valid={(url) => validator(url)}
+    width={20}
+    clip
     save={(url) => edit(url)}
 />

package/{components → 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/package/components/page/Authors.svelte

@@ -0,0 +1,86 @@
+<script>import Parser from '../../models/chapter/Parser';
+import TextEditor from '../editor/TextEditor.svelte';
+import Format from '../chapter/Format.svelte';
+import { afterUpdate } from 'svelte';
+import { getEdition } from './Contexts';
+import Note from '../editor/Note.svelte';
+import Button from '../app/Button.svelte';
+import { tick } from 'svelte';
+export let editable;
+export let authors;
+export let inheritedAuthors = undefined;
+export let add;
+export let edit;
+export let remove;
+let edition = getEdition();
+let authorList = null;
+$: showInherited = authors.length === 0 && inheritedAuthors !== undefined;
+$: authorsToShow = showInherited ? inheritedAuthors : authors;
+async function addAuthor() {
+    add();
+    await tick();
+    if (authors.length > 0 && authorList) {
+        const editors = authorList.querySelectorAll('input');
+        if (editors.length > 0) {
+            const lastAuthor = editors[editors.length - 1];
+            if (lastAuthor instanceof HTMLElement)
+                lastAuthor.focus();
+        }
+    }
+}
+// When there's a new author, focus on it.
+afterUpdate(() => { });
+</script>
+
+<p class="bookish-authors" bind:this={authorList}>
+    <!-- Editing and inherited authors? Say they're  -->
+    {#if authorsToShow === undefined}
+        No authors
+    {:else}
+        <em>by </em>
+        {#each authorsToShow as author, index}
+            {#if editable && !showInherited}
+                <span class="author-editor">
+                    <TextEditor
+                        text={author}
+                        label={'Author name editor'}
+                        placeholder="author"
+                        valid={() => undefined}
+                        save={(text) =>
+                            /* If text is already empty, remove */ author.length >
+                                0 && text === ''
+                                ? remove(index)
+                                : edit(index, text)}
+                    />
+                    <Button
+                        tooltip="remove this author"
+                        command={() => remove(index)}>⨉</Button
+                    >
+                </span>
+            {:else}
+                <span
+                    ><Format
+                        node={Parser.parseFormat($edition, author)}
+                    /></span
+                >{/if}{#if index < authorsToShow.length - 1},&nbsp{/if}
+        {/each}
+    {/if}
+    {#if editable}
+        <Button tooltip="add author" command={addAuthor}>+ author</Button>
+        {#if inheritedAuthors !== undefined && authors.length === 0}<Note
+                >(showing book authors)&nbsp;</Note
+            >{/if}
+    {/if}
+</p>
+
+<style>
+    .bookish-authors {
+        font-family: var(--bookish-header-font-family);
+        font-style: italic;
+        margin: 0;
+    }
+
+    .author-editor {
+        display: inline-block;
+    }
+</style>

package/{components → 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/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/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 → 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
 >