bookish-press 0.4.22 → 0.4.24

package/components/Auth.svelte

@@ -1,5 +1,5 @@
 <script>import { sendSignInLinkToEmail } from 'firebase/auth';
-import { onMount, setContext } from 'svelte';
+import { onDestroy, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { auth } from '../models/Firebase';
 import { AUTH } from './page/Contexts';
@@ -37,16 +37,14 @@ function logout() {
     }
 }
 // On mount, subscribe to authentication changes.
-onMount(() => {
-    if (auth) {
-        const unsubscribe = auth.onAuthStateChanged((user) => {
-            loading = false;
-            updateAuth(user);
-        });
-        // On unmount, stop subscribing.
-        return unsubscribe;
-    }
-});
+if (auth) {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+        loading = false;
+        updateAuth(user);
+    });
+    // On unmount, stop subscribing.
+    onDestroy(unsubscribe);
+}
 // Expose the state and the login/logout functionality.
 setContext(AUTH, authentication);
 </script>

package/components/BookPreview.svelte

@@ -12,26 +12,24 @@ $: cover = book.getCover();
 $: authors = book.getAuthors();
 $: description = book.getDescription();
 $: subdomain = book.getSubdomain();
-$: title = book.getTitle() === '' ? 'Untitled' : book.getTitle();
+$: title = book.getTitle();
 $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
+$: url =
+    subdomain === undefined || write
+        ? refID === undefined
+            ? ''
+            : (write ? '/write/' : '/') + refID
+        : `/${subdomain}`;
 </script>
 
 <article class="book-preview">
     <div class="cover" class:empty={embed === null}>
         {#if embed instanceof EmbedNode}
-            <Embed node={embed} imageOnly />
-        {:else if embed instanceof ErrorNode}
-            <ErrorMessage node={embed} />
+            <Embed node={embed} imageOnly editable={false} />
         {/if}
     </div>
     <div class="content">
-        <Link
-            to={subdomain === undefined || write
-                ? refID === undefined
-                    ? ''
-                    : (write ? '/write/' : '/') + refID
-                : `/${subdomain}`}><h2 class="title">{title}</h2></Link
-        >
+        <Link to={url}><h2 class="title">{title}</h2></Link>
         <p class="authors">
             {#each authors as author, index}
                 <span
@@ -41,7 +39,7 @@ $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
                 <em>No authors</em>
             {/each}
         </p>
-        <p class="description">
+        <div class="description">
             {#if description.length === 0}
                 <em>No description</em>
             {:else}
@@ -49,7 +47,8 @@ $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
                     node={Parser.parseChapter(undefined, description)}
                 />
             {/if}
-        </p>
+        </div>
+        <Link to={`${url}/editions`}>Editions</Link>
     </div>
 </article>
 
@@ -100,6 +99,5 @@ $: embed = cover === null ? null : Parser.parseEmbed(undefined, cover);
         margin-top: 0;
         overflow: hidden;
         text-overflow: ellipsis;
-        height: 5em;
     }
 </style>

package/components/app/Feedback.svelte

@@ -1,11 +1,18 @@
-<script>import Large from './Large.svelte';
+<script>import { onMount } from 'svelte';
+import Large from './Large.svelte';
 export let error = false;
+let visible = error;
+onMount(() => {
+    setTimeout(() => (visible = true), 1000);
+});
 </script>
 
-{#if error}
-    <p role="alert"><slot /></p>
-{:else}
-    <p role="status" aria-live="polite"><Large><slot /></Large></p>
+{#if visible}
+    {#if error}
+        <p role="alert"><slot /></p>
+    {:else}
+        <p role="status" aria-live="polite"><Large><slot /></Large></p>
+    {/if}
 {/if}
 
 <style>
@@ -21,11 +28,6 @@ export let error = false;
         color: var(--app-error-color);
     }
 
-    p[role='alert']:before {
-        content: '! ';
-        font-size: 200%;
-    }
-
     p[role='status'] {
         color: var(--app-font-color);
         animation: waiting 1s infinite;

package/components/app/Head.svelte

@@ -1,4 +1,7 @@
-<h2><slot /></h2>
+<script>export let id = null;
+</script>
+
+<h2 {id}><slot /></h2>
 
 <style>
     h2 {

package/components/app/Head.svelte.d.ts

@@ -1,21 +1,7 @@
-/** @typedef {typeof __propDef.props}  HeadProps */
-/** @typedef {typeof __propDef.events}  HeadEvents */
-/** @typedef {typeof __propDef.slots}  HeadSlots */
-export default class Head extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type HeadProps = typeof __propDef.props;
-export type HeadEvents = typeof __propDef.events;
-export type HeadSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        id?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type HeadProps = typeof __propDef.props;
+export type HeadEvents = typeof __propDef.events;
+export type HeadSlots = typeof __propDef.slots;
+export default class Head extends SvelteComponentTyped<HeadProps, HeadEvents, HeadSlots> {
+}
 export {};

package/components/app/Paragraph.svelte

@@ -15,5 +15,6 @@
 
     .aside {
         font-style: italic;
+        font-size: 90%;
     }
 </style>

package/components/app/{Writing.svelte → Section.svelte}

@@ -7,7 +7,6 @@
         margin: auto;
         padding-left: 2rem;
         padding-right: 2rem;
-        min-width: 30rem;
         max-width: 40rem;
     }
 </style>

package/components/app/Section.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  SectionProps */
+/** @typedef {typeof __propDef.events}  SectionEvents */
+/** @typedef {typeof __propDef.slots}  SectionSlots */
+export default class Section extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SectionProps = typeof __propDef.props;
+export type SectionEvents = typeof __propDef.events;
+export type SectionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/app/TextInput.svelte

@@ -14,6 +14,7 @@ export function value() {
     {type}
     {placeholder}
     {disabled}
+    value={text}
     bind:this={input}
     on:input={() => (text = input.value)}
 />

package/components/chapter/Block.svelte

@@ -19,12 +19,14 @@ import Quote from './Quote.svelte';
 import Rule from './Rule.svelte';
 import Table from './Table.svelte';
 import Problem from './Problem.svelte';
+import { isChapterEditable } from '../page/Contexts';
 export let node;
+let editable = isChapterEditable();
 </script>
 
 {#if node instanceof ParagraphNode}<Paragraph {node} />
 {:else if node instanceof ListNode}<List {node} />
-{:else if node instanceof EmbedNode}<Embed {node} />
+{:else if node instanceof EmbedNode}<Embed {node} {editable} />
 {:else if node instanceof CalloutNode}<Callout {node} />
 {:else if node instanceof QuoteNode}<Quote {node} />
 {:else if node instanceof CodeNode}<CaptionedCode {node} />

package/components/chapter/CaptionedCode.svelte

@@ -3,12 +3,12 @@
 <script>import Code from './Code.svelte';
 import Python from './Python.svelte';
 import Text from './Text.svelte';
-import { isEditable } from '../page/Contexts';
+import { isChapterEditable } from '../page/Contexts';
 import Figure from './Figure.svelte';
 import { getCaret } from '../page/Contexts';
 export let node;
 $: language = node.getLanguage();
-let editable = isEditable();
+let editable = isChapterEditable();
 // const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
 let caret = getCaret();
 $: inside =

package/components/chapter/ChapterBody.svelte

@@ -6,12 +6,13 @@ import Paragraph from './Paragraph.svelte';
 import Problem from './Problem.svelte';
 export let node;
 export let placeholder = '';
+export let editable = false;
 $: errors = node.getErrors();
 $: blocks = node.getBlocks();
 </script>
 
 <section class="bookish-chapter-body" data-nodeid={node.nodeID}>
-    {#if errors.length > 0}
+    {#if editable && errors.length > 0}
         <p>
             <Problem
                 >{errors.length +

package/components/chapter/ChapterBody.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         node: ChapterNode;
         placeholder?: string | undefined;
+        editable?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/chapter/Comment.svelte

@@ -3,14 +3,14 @@
 <script>import Atom from './Atom.svelte';
 import Marginal from './Marginal.svelte';
 import Format from './Format.svelte';
-import { getChapter, isEditable, getCaret, getEdition, } from '../page/Contexts';
+import { getChapter, isChapterEditable, getCaret, getEdition, } from '../page/Contexts';
 import { afterUpdate } from 'svelte';
 import Icon from '../editor/Icon.svelte';
 import CommentIcon from '../editor/icons/comment.svg?raw';
 export let node;
 let chapter = getChapter();
 let edition = getEdition();
-let editable = isEditable();
+let editable = isChapterEditable();
 let caret = getCaret();
 $: chapterNode =
     $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;

package/components/chapter/Embed.svelte

@@ -1,17 +1,17 @@
 <svelte:options immutable={true} />
 
 <script>import { storage } from '../../models/Firebase';
-import { isEditable, getCaret, getBook, } from '../page/Contexts';
+import { getCaret, getBook } from '../page/Contexts';
 import Figure from './Figure.svelte';
 import { getContext } from 'svelte';
 export let node;
+export let editable = false;
 export let placeholder = '';
 export let imageOnly = false;
 $: url = node.getURL();
 $: description = node.getDescription();
 let caret = getCaret();
 let book = getBook();
-let editable = isEditable();
 // Bookish editor should have passed down a way to set the active editor.
 let claimCaret = getContext('claimeditor');
 let dragging = false;
@@ -114,7 +114,7 @@ function handleClick() {
                         : 'Click or drag to choose or upload an image, or enter an image or video URL.'}
                 </p>
             {:else}
-                <p class="bookish-figure-unspecified">Missing image or video</p>
+                <p class="bookish-figure-unspecified">No image or video</p>
             {/if}
         {:else if url.includes('https://www.youtube.com') || url.includes('https://youtu.be') || url.includes('https://www.tiktok.com') || url.includes('vimeo.com')}
             <article class="bookish-figure-embed">

package/components/chapter/Embed.svelte.d.ts

@@ -3,6 +3,7 @@ import type EmbedNode from '../../models/chapter/EmbedNode';
 declare const __propDef: {
     props: {
         node: EmbedNode;
+        editable?: boolean | undefined;
         placeholder?: string | undefined;
         imageOnly?: boolean | undefined;
     };

package/components/chapter/Figure.svelte

@@ -2,11 +2,11 @@
 
 <script>import Format from './Format.svelte';
 import Positioned from './Positioned.svelte';
-import { getCaret, isEditable } from '../page/Contexts';
+import { getCaret, isChapterEditable } from '../page/Contexts';
 export let node;
 export let caption;
 export let credit = undefined;
-let editable = isEditable();
+let editable = isChapterEditable();
 let caret = getCaret();
 $: selected = $caret?.range?.start.node === node;
 function focusFigure() {

package/components/chapter/Format.svelte

@@ -19,10 +19,10 @@ import Link from './Link.svelte';
 import Comment from './Comment.svelte';
 import Text from './Text.svelte';
 import Format from './Format.svelte';
-import { isEditable } from '../page/Contexts';
+import { isChapterEditable } from '../page/Contexts';
 export let node;
+export let editable = false;
 export let placeholder = undefined;
-let editable = isEditable();
 $: format = node.getFormat();
 $: tag =
     format === '*'
@@ -35,7 +35,9 @@ $: tag =
                     ? 'sub'
                     : 'span';
 $: showPlaceholder =
-    node.isEmptyText() && placeholder !== undefined && editable;
+    node.isEmptyText() &&
+        placeholder !== undefined &&
+        (editable || isChapterEditable());
 </script>
 
 <svelte:element

package/components/chapter/Format.svelte.d.ts

@@ -3,6 +3,7 @@ import FormatNode from '../../models/chapter/FormatNode';
 declare const __propDef: {
     props: {
         node: FormatNode;
+        editable?: boolean | undefined;
         placeholder?: string | undefined;
     };
     events: {

package/components/chapter/InlineCode.svelte

@@ -1,10 +1,10 @@
 <svelte:options immutable={true} />
 
-<script>import { isEditable } from '../page/Contexts';
+<script>import { isChapterEditable } from '../page/Contexts';
 import Code from './Code.svelte';
 import Text from './Text.svelte';
 export let node;
-let editable = isEditable();
+let editable = isChapterEditable();
 </script>
 
 {#if editable}

package/components/chapter/Label.svelte

@@ -1,10 +1,10 @@
 <svelte:options immutable={true} />
 
 <script>import Atom from './Atom.svelte';
-import { getChapter, getEdition, isEditable } from '../page/Contexts';
+import { getChapter, getEdition, isChapterEditable, } from '../page/Contexts';
 import Problem from './Problem.svelte';
 export let node;
-let editable = isEditable();
+let editable = isChapterEditable();
 let chapter = getChapter();
 let edition = getEdition();
 $: ast =

package/components/chapter/Link.svelte

@@ -1,11 +1,11 @@
 <svelte:options immutable={true} />
 
-<script>import { getBase, getEdition, isEditable } from '../page/Contexts';
+<script>import { getBase, getEdition, isChapterEditable } from '../page/Contexts';
 import Text from './Text.svelte';
 import Problem from './Problem.svelte';
 export let node;
 let base = getBase();
-let editable = isEditable();
+let editable = isChapterEditable();
 let edition = getEdition();
 $: url = node.getMeta();
 $: content = node.getText();

package/components/chapter/Marginal.svelte

@@ -2,13 +2,13 @@
 
 <script>import { isMobile, watchMobile } from '../../util/isMobile';
 import { onMount } from 'svelte';
-import { getCaret, getChapter, isEditable, } from '../page/Contexts';
+import { getCaret, getChapter, isChapterEditable, } from '../page/Contexts';
 export let node;
 export let id;
 export let label;
 let hovered = false;
 let chapter = getChapter();
-$: editable = isEditable();
+$: editable = isChapterEditable();
 let caret = getCaret();
 // If there's no marginal selected or this is different from the current selection, this is hidden.
 $: selectedMarginal = $chapter?.marginal;

package/components/chapter/Paragraph.svelte

@@ -56,6 +56,11 @@ $: classes =
         min-height: var(--bookish-paragraph-line-height);
     }
 
+    .placeholder {
+        color: var(--bookish-muted-color);
+        font-style: italic;
+    }
+
     h2,
     h3,
     h4,

package/components/chapter/Table.svelte

@@ -3,9 +3,9 @@
 <script>import Figure from './Figure.svelte';
 import Format from './Format.svelte';
 import Rows from '../page/Rows.svelte';
-import { isEditable } from '../page/Contexts';
+import { isChapterEditable } from '../page/Contexts';
 export let node;
-let editable = isEditable();
+let editable = isChapterEditable();
 $: rows = node.getRows();
 </script>
 

package/components/chapter/Text.svelte

@@ -1,11 +1,11 @@
 <svelte:options immutable={true} />
 
-<script>import { getChapter, isEditable } from '../page/Contexts';
+<script>import { getChapter, isChapterEditable } from '../page/Contexts';
 export let node;
 export let placeholder = undefined;
 $: text = node.getText();
 let context = getChapter();
-let editable = isEditable();
+let editable = isChapterEditable();
 function replaceMultipleSpacesWithNonBreakingSpaces(original) {
     let revisedText = '';
     for (let i = 0; i < original.length; i++) {