bookish-press 0.5.1 → 0.5.4

package/{package → dist}/components/editor/Permissions.svelte

@@ -28,6 +28,8 @@ async function addEditor() {
     }
 }
 function hasEditor(email) {
+    if (email.length === 0)
+        return false;
     const match = Array.from($emails.entries()).find(([, e]) => e === email);
     if (match === undefined)
         return false;

package/{package → dist}/components/editor/TextEditor.svelte

@@ -24,7 +24,7 @@ $: {
         // them with non-breaking spaces.
         const sizedText = showPlaceholder()
             ? placeholder
-            : text.replace(/\s/g, '\u00a0');
+            : text.replace(/\s$/g, '\u00a0');
         // 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 &&
@@ -111,7 +111,6 @@ function handleKeyPress(event) {
         bind:this={field}
         bind:value={text}
         required
-        role="textbox"
         aria-invalid={error !== undefined}
         aria-label={label}
         aria-placeholder={label}
@@ -136,6 +135,8 @@ function handleKeyPress(event) {
 <style>
     .text-editor {
         position: relative;
+        display: inline-block;
+        max-width: 100%;
     }
 
     input[type='text'] {
@@ -175,6 +176,8 @@ function handleKeyPress(event) {
 
     /* This ensures the error message always appears below empty text editors */
     .sizer {
+        display: inline-block;
+        max-width: 100%;
         min-height: 1em;
         opacity: 0;
         border: none;

package/{package → dist}/components/editor/Toggle.svelte

@@ -24,7 +24,7 @@ function toggle() {
     class={`bookish-app-interactive ${
         saving === Status.Saving ? ' bookish-text-editor-saving' : ''
     } ${saving === Status.Error ? ' bookish-text-editor-error' : ''}`}
-    tabIndex="0"
+    tabindex="0"
     role="switch"
     aria-checked={on}
     on:keydown={(event) =>

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

@@ -154,10 +154,11 @@ function handleKeyPress(event) {
     <section
         class="bookish-editor-toolbar"
         bind:this={element}
+        role="button"
         on:keypress={handleKeyPress}
         on:keydown={handleKeyPress}
         on:mousedown|stopPropagation={() => element?.focus()}
-        tabIndex="0"
+        tabindex="0"
         transition:slide={{ duration: 200 }}
     >
         {#if context && categories}

package/{package → dist}/components/page/Chapter.svelte

@@ -361,7 +361,7 @@ let editable = isBookEditable() ||
         {/if}
 
         {#if editable || isEditionPartiallyEditable()}
-            <PageHeader>Editors</PageHeader>
+            <PageHeader id="editors">Editors</PageHeader>
             <Instructions {editable}
                 >These authors can edit this chapter. Add an email here to
                 provide chapter-level edit permissions.</Instructions

package/{package → dist}/components/page/ChapterTitle.svelte

@@ -11,6 +11,8 @@ export let link = undefined;
 <style>
     h3 {
         font-family: var(--bookish-header-font-family);
+        /* Disable heavy weight in this context. */
+        font-weight: normal;
         margin: 0;
     }
 </style>

package/{package → dist}/components/page/DefinitionView.svelte

@@ -5,13 +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 { getUser, getEdition, getLeasee, isChapterEditable, lease, } from './Contexts';
+import { getUser, getEdition, getLeasee, isChapterEditable, lease, isEditionEditable, } from './Contexts';
 import Button from '../app/Button.svelte';
 export let id;
 export let definition;
 let auth = getUser();
 let edition = getEdition();
-let editable = isChapterEditable();
+let editable = isEditionEditable();
 // Focus after adding a new synonym.
 let newSynonym = false;
 let synonymsEditor = null;
@@ -36,6 +36,23 @@ function addSynonym() {
     }
     newSynonym = true;
 }
+function removeSynonym(index) {
+    if (definition.synonyms &&
+        index >= 0 &&
+        index < definition.synonyms.length)
+        updateSynonyms([
+            ...definition.synonyms.slice(0, index),
+            ...definition.synonyms.slice(index + 1),
+        ]);
+}
+function updateSynonyms(synonyms) {
+    if ($edition)
+        edition.set($edition.withEditedDefinition(id, {
+            phrase: definition.phrase,
+            definition: definition.definition,
+            synonyms: synonyms,
+        }));
+}
 $: syns = definition.synonyms || [];
 </script>
 
@@ -67,11 +84,11 @@ $: syns = definition.synonyms || [];
             {#if editable}
                 <ConfirmButton
                     tooltip="delete definition of {definition.phrase}"
-                    confirm="remove definition?"
+                    confirm="delete entry"
                     command={() =>
                         $edition
                             ? edition.set($edition.withoutDefinition(id))
-                            : undefined}>- definition</ConfirmButton
+                            : undefined}>⨉</ConfirmButton
                 >
             {/if}
         </dt>
@@ -111,40 +128,26 @@ $: syns = definition.synonyms || [];
             {/if}
             {#if edition && editable}
                 <span bind:this={synonymsEditor}>
-                    {#if syns.length === 0}
-                        <Note>no synonyms</Note>
-                    {:else}
-                        {#each syns as syn, index}
-                            <Note>
-                                <TextEditor
-                                    text={syn}
-                                    label={'Synonym editor.'}
-                                    placeholder="synonym"
-                                    valid={() => undefined}
-                                    save={(text) => {
-                                        const newSyns = [...syns];
-                                        // Remove the synonym if it's empty but wasn't before
-                                        if (syn.length > 0 && text.length === 0)
-                                            newSyns.splice(index, 1);
-                                        else newSyns[index] = text;
-                                        if ($edition)
-                                            edition.set(
-                                                $edition.withEditedDefinition(
-                                                    id,
-                                                    {
-                                                        phrase: definition.phrase,
-                                                        definition:
-                                                            definition.definition,
-                                                        synonyms: newSyns,
-                                                    }
-                                                )
-                                            );
-                                    }}
-                                />
-                            </Note>
-                            {#if syns.length > 1 && index < syns.length - 1},&nbsp;{/if}
-                        {/each}
-                    {/if}
+                    {#each syns as syn, index}
+                        <Note>
+                            <TextEditor
+                                text={syn}
+                                label={'Synonym editor.'}
+                                placeholder="synonym"
+                                valid={() => undefined}
+                                save={(text) => {
+                                    const newSyns = [...syns];
+                                    newSyns[index] = text;
+                                    updateSynonyms(newSyns);
+                                }}
+                            />
+                            <Button
+                                tooltip="delete synonym"
+                                command={() => removeSynonym(index)}>x</Button
+                            >
+                        </Note>
+                        {#if syns.length > 1 && index < syns.length - 1},&nbsp;{/if}
+                    {/each}
                 </span>&nbsp;<Button tooltip="add synonym" command={addSynonym}
                     >+ synonym</Button
                 >
@@ -162,6 +165,8 @@ $: syns = definition.synonyms || [];
     }
 
     dt {
+        font-family: var(--bookish-header-font-family);
         font-weight: bold;
+        vertical-align: baseline;
     }
 </style>

package/dist/components/page/Edition.svelte

@@ -0,0 +1,127 @@
+<script>import smoothscroll from 'smoothscroll-polyfill';
+import { goto } from '$app/navigation';
+import { onMount, setContext, tick } from 'svelte';
+import { writable } from 'svelte/store';
+import { BASE, DARK_MODE, getBook, } from './Contexts';
+import { BookishTheme } from '../../models/book/Theme';
+import { isDark, setDark } from '../../util/dark';
+import { page } from '$app/stores';
+// Poly fill smooth scrolling for Safari.
+onMount(() => smoothscroll.polyfill());
+// 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 = '';
+let book = getBook();
+// When the base changes, update the context.
+let baseStore = writable(base);
+$: setContext(BASE, baseStore);
+$: baseStore.set(base);
+// 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(isDark());
+// Expose dark mode to descendants
+setContext(DARK_MODE, darkMode);
+// When dark mode changes, update the body's class list.
+$: {
+    setDark($darkMode);
+    // Set the theme, whatever it is, and change it when the edition changes
+    setTheme(edition.getTheme() ?? BookishTheme);
+}
+// The CSS to set on the edition.
+let themeCSS;
+// 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('#', ''));
+/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme. */
+function setTheme(theme) {
+    if (theme === null)
+        theme = BookishTheme;
+    themeCSS = `
+            ${(theme.imports ?? [])
+        .map((url) => `@import url(${url});`)
+        .join('\n')}
+            .bookish {
+                ${theme.light ? toRules(theme.light) : ''}
+                ${theme.fonts ? toRules(theme.fonts) : ''}
+                ${theme.sizes ? toRules(theme.sizes) : ''}
+                ${theme.weights ? toRules(theme.weights) : ''}
+                ${theme.spacing ? toRules(theme.spacing) : ''}
+            }
+            .dark {
+                ${theme.dark ? toRules(theme.dark) : ''}
+            }
+        `;
+}
+function toRules(set) {
+    return Object.keys(set)
+        .map((name) => {
+        const value = set[name];
+        if (value.length > 0) {
+            const cssVariable = '--bookish-' +
+                name
+                    .replace(/([a-z])([A-Z])/g, '$1 $2')
+                    .split(' ')
+                    .map((s) => s.toLowerCase())
+                    .join('-')
+                    .replace(/([0-9])/g, '-$1-');
+            return `${cssVariable}: ${value};`;
+        }
+    })
+        .join('\n\t\t');
+}
+</script>
+
+<!-- Keep the imports up to date -->
+<svelte:head>
+    {@html '<' + `style>${themeCSS}</style>`}
+
+    <meta property="og:title" content={edition.getTitle()} />
+    <meta property="og:image" content={edition.getImage('cover')} />
+    <meta property="og:description" content={edition.getDescription()} />
+    <meta property="og:type" content="book" />
+    <meta property="og:author" content={edition.getAuthorsText()} />
+    <meta
+        property="og:url"
+        content={edition.base ??
+            `https://bookish.press/${
+                $book && $book.domain ? $book.domain : $page.params.bookid
+            }`}
+    />
+</svelte:head>
+
+<main class="bookish {$darkMode ? ' dark' : ''}">
+    <slot />
+</main>
+
+<style>
+    * {
+        box-sizing: border-box;
+    }
+
+    /* WINDOW AND PAGES */
+    :global(body) {
+        margin: 0;
+        padding: 0;
+        background-color: var(--bookish-background-color);
+    }
+
+    /* The root container for a book */
+    .bookish {
+        font-weight: var(--bookish-paragraph-font-weight);
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-paragraph-font-size);
+        background-color: var(--bookish-background-color);
+        color: var(--bookish-paragraph-color);
+        width: 100%;
+        z-index: 0;
+        text-align: left;
+    }
+</style>

package/{package → dist}/components/page/EditionLoader.svelte

@@ -4,7 +4,7 @@ import Feedback from '../app/Feedback.svelte';
 import { getBook, getEdition, getUser, getChapterText, } from './Contexts';
 import { onDestroy } from 'svelte';
 import { page } from '$app/stores';
-import { listenToChapters, listenToEdition } from '../../models/CRUD';
+import { deleteChapterText, listenToChapters, listenToEdition, } from '../../models/CRUD';
 export let write;
 let auth = getUser();
 let book = getBook();
@@ -67,8 +67,17 @@ function listen() {
                 // Update the chapter text store.
                 chapterText.set(chapters);
                 // Update the chapter text in the current edition.
-                if ($edition)
-                    edition.set($edition.withChapterText(chapters));
+                if ($edition) {
+                    const newEdition = $edition.withChapterText(chapters);
+                    if (newEdition !== $edition)
+                        edition.set(newEdition);
+                    // Get all the chapters in the updated chapter list and
+                    // delete the ones not referenced by the edition.
+                    chapters
+                        .filter(([ref]) => $edition &&
+                        !$edition.hasChapterRefID(ref.id))
+                        .forEach(([ref]) => deleteChapterText(ref));
+                }
             });
         }
     }

package/{package → dist}/components/page/Editions.svelte

@@ -84,7 +84,7 @@ async function handleDraftEdition() {
                                 undefined,
                                 edition.summary
                             )}
-                        />{:else}&mdash{/if}</p
+                        />{:else}&mdash;{/if}</p
                 >
             </section>
         {/if}

package/{package → dist}/components/page/Header.svelte

@@ -54,80 +54,84 @@ let embed;
 $: embed = getImage();
 </script>
 
-<header class="bookish-chapter-header">
-    {#if embed}
-        <div class="bookish-figure-full">
-            {#if $edition && editable}
-                <BookishEditor
-                    text={embed}
-                    parser={(text) => Parser.parseEmbed($edition, text)}
-                    save={(node) =>
-                        setImage ? setImage(node.toBookdown()) : undefined}
-                    chapter={false}
-                    component={Embed}
-                    placeholder=""
-                    leasee={getLeasee(auth, edition, `embed-${id}`)}
-                    lease={(lock) => lease(auth, edition, `embed-${id}`, lock)}
-                />
-            {:else}
-                <Embed
-                    node={Parser.parseEmbed($edition, embed)}
-                    editable={false}
-                />
-            {/if}
-            {#if !print && showReminder}
-                <div class="bookish-scroll-reminder" />
-            {/if}
-        </div>
-    {:else}
-        <!-- Add a bit of space to account for the lack of an image. -->
-        <p>&nbsp;</p>
-    {/if}
-    {#if !print}
-        <slot name="outline" />
-    {/if}
-    {#if editable}
-        {#if embed === null}
-            <Button tooltip="add cover image" command={addCover}
-                >+ cover image</Button
-            >
+<!-- We key on the chapter ID to avoid laggy updates from image loading -->
+{#key id}
+    <header class="bookish-chapter-header">
+        {#if embed}
+            <div class="bookish-figure-full">
+                {#if $edition && editable}
+                    <BookishEditor
+                        text={embed}
+                        parser={(text) => Parser.parseEmbed($edition, text)}
+                        save={(node) =>
+                            setImage ? setImage(node.toBookdown()) : undefined}
+                        chapter={false}
+                        component={Embed}
+                        placeholder=""
+                        leasee={getLeasee(auth, edition, `embed-${id}`)}
+                        lease={(lock) =>
+                            lease(auth, edition, `embed-${id}`, lock)}
+                    />
+                {:else}
+                    <Embed
+                        node={Parser.parseEmbed($edition, embed)}
+                        editable={false}
+                    />
+                {/if}
+                {#if !print && showReminder}
+                    <div class="bookish-scroll-reminder" />
+                {/if}
+            </div>
         {:else}
-            <ConfirmButton
-                confirm="remove image?"
-                tooltip="remove cover image"
-                command={removeCover}>- cover image</ConfirmButton
-            >
+            <!-- Add a bit of space to account for the lack of an image. -->
+            <p>&nbsp;</p>
         {/if}
-    {/if}
-    <div bind:this={title} class="bookish-chapter-header-text">
-        <slot name="before" />
-        <Title>
-            {#if editable && save}
-                <TextEditor
-                    {label}
-                    text={header + (subtitle ? ': ' + subtitle : '')}
-                    placeholder="title"
-                    valid={(text) =>
-                        text.length === 0
-                            ? 'Titles have to be at least one character long.'
-                            : undefined}
-                    {save}
-                />
+        {#if !print}
+            <slot name="outline" />
+        {/if}
+        {#if editable}
+            {#if embed === null}
+                <Button tooltip="add cover image" command={addCover}
+                    >+ cover image</Button
+                >
             {:else}
-                {header}
-                {#if subtitle}<div class="bookish-subtitle">{subtitle}</div
-                    >{/if}
+                <ConfirmButton
+                    confirm="delete image"
+                    tooltip="delete cover image"
+                    command={removeCover}>- cover image</ConfirmButton
+                >
             {/if}
-        </Title>
-        <slot name="after" />
-        {#if tags}
-            <div
-                >{#each tags as tag}<span class="bookish-tag">{tag}</span
-                    >{/each}</div
-            >
         {/if}
-    </div>
-</header>
+        <div bind:this={title} class="bookish-chapter-header-text">
+            <slot name="before" />
+            <Title>
+                {#if editable && save}
+                    <TextEditor
+                        {label}
+                        text={header + (subtitle ? ': ' + subtitle : '')}
+                        placeholder="title"
+                        valid={(text) =>
+                            text.length === 0
+                                ? 'Titles have to be at least one character long.'
+                                : undefined}
+                        {save}
+                    />
+                {:else}
+                    {header}
+                    {#if subtitle}<div class="bookish-subtitle">{subtitle}</div
+                        >{/if}
+                {/if}
+            </Title>
+            <slot name="after" />
+            {#if tags}
+                <div
+                    >{#each tags as tag}<span class="bookish-tag">{tag}</span
+                        >{/each}</div
+                >
+            {/if}
+        </div>
+    </header>
+{/key}
 
 <style>
     .bookish-subtitle {

package/{package → dist}/components/page/Media.svelte

@@ -24,7 +24,7 @@ onMount(() => {
     media?.notify(updateImages);
     return () => media?.stopNotifying(updateImages);
 });
-$: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() === image.url) === undefined);
+$: unused = images?.filter((image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL())));
 </script>
 
 {#if $edition}
@@ -59,9 +59,10 @@ $: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() ===
         {:else}
             <p>These are the images in the book:</p>
         {/if}
-        {#each embeds as embed}
+        {#each embeds as { embed, chapterID }}
             {#if !embed.isVideo()}
                 <MediaPreview
+                    {chapterID}
                     url={embed.isLocal()
                         ? `${$base}/${embed.getSmallURL()}`
                         : embed.getSmallURL()}
@@ -89,10 +90,10 @@ $: unused = images?.filter((image) => embeds.find((embed) => embed.getURL() ===
                 be used in other editions of this book.
             </Instructions>
             {#each unused as image}
-                <MediaPreview url={image.url} alt={''}>
+                <MediaPreview chapterID={undefined} url={image.url} alt={''}>
                     <ConfirmButton
                         tooltip="delete unused image"
-                        confirm="delete image?"
+                        confirm="delete image"
                         command={() =>
                             media
                                 ?.remove(image)

package/{package → dist}/components/page/MediaPreview.svelte

@@ -1,9 +1,13 @@
-<script>export let url;
+<script>import Link from '../Link.svelte';
+import { getBase } from './Contexts';
+export let url;
 export let alt;
+export let chapterID;
+let base = getBase();
 let loaded;
 let urlChecked;
 $: {
-    if (urlChecked !== url) {
+    if (urlChecked !== url && typeof Image !== 'undefined') {
         urlChecked = url;
         let image = new Image();
         image.src = url;
@@ -18,7 +22,9 @@ $: {
 
 <figure class={'media-preview'}>
     {#if loaded}
-        <img src={url.startsWith('http') ? url : `${url}`} {alt} />
+        <Link to={`${$base}/${chapterID}`} linked={chapterID !== undefined}
+            ><img src={url.startsWith('http') ? url : `${url}`} {alt} /></Link
+        >
     {:else if loaded === null}
         <div class="missing">missing image</div>
     {/if}

package/{package → dist}/components/page/MediaPreview.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         url: string;
         alt: string;
+        chapterID: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{package → dist}/components/page/Outline.svelte

@@ -129,7 +129,7 @@ let expandLabel = '\u2630';
             aria-label={expanded
                 ? 'Collapse navigation menu'
                 : 'Expand navigation menu'}
-            tabIndex="0"
+            tabindex="0"
             on:click={headers.length > 0 ? toggleExpanded : undefined}
             on:keydown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ')

package/{package → dist}/components/page/Page.svelte

@@ -2,10 +2,12 @@
 import Loading from './Loading.svelte';
 export let title;
 export let afterLoaded = undefined;
-let loaded = false;
+let fontsLoaded = false;
+let imagesLoaded = false;
 let lastHeight = 0;
 let intervalID = null;
 let mountTime = Date.now();
+$: loaded = fontsLoaded && imagesLoaded;
 function watchLoading() {
     const bodyHeight = document.body.clientHeight;
     // If the height hasn't changed and images are loaded OR it's been 2 seconds, load.
@@ -14,7 +16,7 @@ function watchLoading() {
         // Stop watching the images
         stopWatching();
         // Set to loaded to hide the overlay and notify callback if there is one.
-        loaded = true;
+        imagesLoaded = true;
         if (afterLoaded)
             afterLoaded();
     }
@@ -29,6 +31,7 @@ onMount(() => {
     // Watch the height of the document and wait until it's been stable for a while before scrolling
     // to any targets. We use the data below to monitor the document height over time.
     intervalID = setInterval(() => watchLoading(), 50);
+    document.fonts.ready.then(() => (fontsLoaded = true));
     return () => stopWatching();
 });
 function imagesAreLoaded() {
@@ -45,7 +48,7 @@ function imagesAreLoaded() {
     <meta name="description" content={title} />
 </svelte:head>
 
-<section class={'bookish-page' + (loaded ? ' loaded' : '')}>
+<section class={'bookish-page' + (imagesLoaded ? ' loaded' : '')}>
     <slot />
 </section>
 <!-- Overlay loading feedback if loading, but still render the page. -->