bookish-press 0.5.25 → 0.5.32

package/dist/components/BookPreview.svelte

@@ -60,6 +60,7 @@ $: url =
         text-align: left;
         flex-wrap: wrap;
         height: 12em;
+        overflow-y: hidden;
     }
 
     .cover {

package/dist/components/chapter/Callout.svelte

@@ -25,7 +25,6 @@ export let node;
         padding-bottom: var(--bookish-paragraph-spacing);
         line-height: var(--bookish-paragraph-line-height-tight);
         clear: both;
-        position: relative;
     }
 
     .bookish-callout :global(h2),

package/dist/components/chapter/Embed.svelte

@@ -1,11 +1,11 @@
 <svelte:options immutable={true} />
 
 <script>import { storage } from '../../models/Firebase';
-import { getCaret, getBook, getBase } from '../page/Contexts';
+import { getCaret, getBook, getBase, isEditionEditable, } from '../page/Contexts';
 import Figure from './Figure.svelte';
 import { getContext } from 'svelte';
 export let node;
-export let editable = false;
+export let editable = true;
 export let placeholder = '';
 export let imageOnly = false;
 $: url = node.getURL();
@@ -13,6 +13,7 @@ $: description = node.getDescription();
 let caret = getCaret();
 let book = getBook();
 let base = getBase();
+let editionEditable = isEditionEditable();
 // Bookish editor should have passed down a way to set the active editor.
 let claimCaret = getContext('claimeditor');
 let dragging = false;
@@ -94,7 +95,7 @@ function handleClick() {
         credit={imageOnly ? undefined : node.getCredit()}
     >
         {#if url.trim().length === 0}
-            {#if editable}
+            {#if editable && editionEditable}
                 <p
                     class={`bookish-figure-unspecified ${
                         dragging ? 'bookish-figure-dragging' : ''

package/dist/components/chapter/ExtendedPrism.d.ts

@@ -1,2 +1,2 @@
 export default Prism;
-import Prism from "prismjs";
+import Prism from 'prismjs';

package/dist/components/chapter/Figure.svelte

@@ -70,7 +70,6 @@ function focusFigure() {
 
     .caption {
         text-align: center;
-        position: relative;
         color: var(--bookish-muted-color);
         line-height: var(--bookish-paragraph-line-height-tight);
         font-size: var(--bookish-block-font-size);

package/dist/components/chapter/Footnote.svelte

@@ -67,6 +67,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
         font-weight: 300;
         font-size: var(--bookish-small-font-size);
         /* line-height: 1.5em; */
+        text-align: left;
     }
 
     .bookish-footnote-symbol {

package/dist/components/chapter/List.svelte

@@ -24,50 +24,33 @@ export let node;
         line-height: var(--bookish-paragraph-line-height-tight);
     }
 
-    ol {
-        list-style: none;
-        counter-reset: item;
+    li {
+        margin-bottom: calc(0.5 * var(--bookish-paragraph-spacing));
     }
 
-    ol > li {
-        counter-increment: item;
+    /* Lists are decimal numbered */
+    ol {
+        list-style: decimal;
     }
 
-    ol > li {
-        list-style-type: none;
+    /* First level is decimal */
+    ol li {
+        counter-increment: list-item;
+        list-style-type: decimal;
     }
 
-    ol > :global(ol > li) {
-        list-style-type: none;
+    /* Second level is lowercase alpha */
+    ol ol li {
+        list-style-type: lower-alpha;
     }
 
-    ol > :global(ol > ol > li) {
-        list-style-type: none;
+    /* Third level is uppercase alpha */
+    ol ol ol li {
+        list-style-type: upper-alpha;
     }
 
-    ol > :global(li::before),
-    ul > :global(ol > li::before),
-    ul > :global(ul > ol > li::before) {
-        content: counter(item) '. ';
+    ol li::marker {
         color: var(--bookish-bullet-color);
-        display: inline-block;
-        width: 1em;
-        margin-left: -1.5rem;
-        margin-right: 0.5rem;
-        text-align: right;
-    }
-
-    ol > :global(ol > li::before),
-    ul > :global(ol > ol > li::before) {
-        content: counter(item, lower-alpha) '. ';
-    }
-
-    ol > :global(ol > ol > li:before) {
-        content: counter(item, upper-alpha) '. ';
-    }
-
-    li {
-        margin-bottom: calc(0.5 * var(--bookish-paragraph-spacing));
     }
 
     ul li {

package/dist/components/chapter/Paragraph.svelte

@@ -19,10 +19,15 @@ $: classes =
             ($chapter && $chapter.highlightedID === id
                 ? ' bookish-content-highlight'
                 : '');
+$: firstParagraph = $root.getFirstParagraph();
+$: dropcap =
+    placeholder === undefined &&
+        node === firstParagraph &&
+        /^[a-zA-Z]/.test(firstParagraph.getFirstTextNode().getText());
 </script>
 
 {#if level === 0}
-    <p data-nodeid={node.nodeID} class:placeholder
+    <p data-nodeid={node.nodeID} class:placeholder class:dropcap
         ><Format node={node.getFormat()} placeholder={placeholder ?? '¶'} /></p
     >
 {:else}
@@ -54,7 +59,7 @@ $: classes =
     }
 
     /* This implements a drop cap in the first letter of the first text in the first format of the first paragraph of a chapter (but only chapters). */
-    :global(.chapter-content) p:first-of-type:not(.placeholder)::first-letter {
+    p.dropcap::first-letter {
         padding: 0 0.25rem;
         margin: 0 0.25rem 0 0;
         font-size: 4rem;

package/dist/components/chapter/Quote.svelte

@@ -37,12 +37,11 @@ $: credit = node.getCredit();
         font-family: var(--bookish-header-font-family);
         font-weight: 400;
         font-style: italic;
-        padding: 0;
-        margin-top: var(--bookish-paragraph-spacing);
-        margin-bottom: var(--bookish-paragraph-spacing);
-        margin-left: var(--bookish-indent);
-        margin-right: var(--bookish-indent);
-        position: relative;
+        margin: 0;
+        padding-top: 0;
+        padding-bottom: var(--bookish-paragraph-spacing);
+        padding-left: var(--bookish-indent);
+        padding-right: var(--bookish-indent);
     }
 
     .quote > :global(p) {
@@ -52,6 +51,7 @@ $: credit = node.getCredit();
 
     .caption {
         margin-top: 0.5em;
+        margin-right: var(--bookish-indent);
         text-align: right;
         font-family: var(--bookish-header-font-family);
         font-style: italic;

package/dist/components/controls/DarkToggle.svelte

@@ -13,7 +13,7 @@ function change() {
     class="dark-toggle"
     role="button"
     aria-label={dark === true ? 'Switch to light mode' : 'Switch to dark mode'}
-    tabIndex="0"
+    tabindex="0"
     on:click={change}
     on:keydown={(event) => {
         if (event.key === 'Enter' || event.key === ' ') {

package/dist/components/editor/BookishEditor.svelte

@@ -16,9 +16,8 @@ import ErrorNode from '../../models/chapter/ErrorNode';
 import { caretRangeToIndexRange, indexRangeToCaretRange, } from '../../models/chapter/Caret';
 import commands from './Commands';
 import { afterUpdate, onMount, setContext } from 'svelte';
-import { getCaret, getRoot } from '../page/Contexts';
+import { getCaret } from '../page/Contexts';
 import CaretView from './CaretView.svelte';
-import { writable } from 'svelte/store';
 const IDLE_TIME = 500;
 export let text;
 export let parser;
@@ -159,25 +158,18 @@ afterUpdate(() => {
                     const lineHeight = lineHeightString.endsWith('px')
                         ? parseInt(lineHeightString.substring(0, lineHeightString.length - 2))
                         : undefined;
-                    // Is the caret in relatively positioned ancestors above the editor? Undo their offsets.
-                    let caretAncestor = startNode.parentElement;
+                    // Figure out the relative position of this editor.
+                    let editorAncestor = element;
                     let relativeX = 0;
                     let relativeY = 0;
-                    let fixedX = undefined;
-                    let fixedY = undefined;
-                    while (caretAncestor != null) {
-                        const style = window.getComputedStyle(caretAncestor);
+                    while (editorAncestor != null) {
+                        const style = window.getComputedStyle(editorAncestor);
                         if (style.position === 'relative') {
-                            relativeX += caretAncestor.offsetLeft;
-                            relativeY += caretAncestor.offsetTop;
+                            relativeX += editorAncestor.offsetLeft;
+                            relativeY += editorAncestor.offsetTop;
                         }
-                        else if (style.position === 'fixed') {
-                            fixedX = caretAncestor.offsetLeft;
-                            fixedY = caretAncestor.offsetTop;
-                        }
-                        caretAncestor = caretAncestor.parentElement;
+                        editorAncestor = editorAncestor.parentElement;
                     }
-                    // Is the caret in a fixed position marginal? Get it's position.
                     // If we're after a new line, calculate the correct position, since selections don't actually render to the next line.
                     const left = afterNewLine
                         ? textRect.left
@@ -185,6 +177,7 @@ afterUpdate(() => {
                     const top = afterNewLine && lineHeight
                         ? rangeRect.top + lineHeight
                         : rangeRect.top;
+                    // Compute the final position of the caret.
                     const position = {
                         x: left + window.scrollX - relativeX,
                         y: top + window.scrollY - relativeY,

package/dist/components/editor/Commands.js

@@ -835,19 +835,6 @@ const commands = [
             return rootWithNode(context, context.blocks, edit.root, () => edit.range.start);
         },
     },
-    {
-        icon: IndentIcon,
-        description: 'indent list item',
-        category: 'list',
-        mutates: true,
-        control: false,
-        alt: false,
-        shift: false,
-        key: 'Tab',
-        visible: (context) => context.list !== undefined,
-        active: (context) => context.list !== undefined,
-        handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withListsIndented(context.range, true)),
-    },
     {
         icon: UnindentIcon,
         description: 'unindent list item',
@@ -862,6 +849,19 @@ const commands = [
             context.list.isInside(context.root, ListNode),
         handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withListsIndented(context.range, false)),
     },
+    {
+        icon: IndentIcon,
+        description: 'indent list item',
+        category: 'list',
+        mutates: true,
+        control: false,
+        alt: false,
+        shift: false,
+        key: 'Tab',
+        visible: (context) => context.list !== undefined,
+        active: (context) => context.list !== undefined,
+        handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withListsIndented(context.range, true)),
+    },
     {
         icon: ClearIcon,
         description: 'clear formatting',
@@ -1222,7 +1222,7 @@ const commands = [
                 const newTable = new TableNode(newRows, '|', new FormatNode('', [new TextNode()]));
                 return rootWithNode(context, context.blocks, context.blocks.withBlockInsertedBefore(context.paragraph, newTable), () => {
                     return {
-                        node: newTable.getRows()[0][0].getTextNodes()[0],
+                        node: newTable.getRows()[0][0].getFirstTextNode(),
                         index: 0,
                     };
                 });

package/dist/components/editor/ConfirmButton.svelte

@@ -9,7 +9,7 @@ let confirming = false;
     {#if !confirming}
         <Button {tooltip} command={() => (confirming = true)}><slot /></Button>
     {:else}
-        <Button tooltip="no" command={() => (confirming = false)}>no</Button
+        <Button tooltip="no" command={() => (confirming = false)}>cancel</Button
         >&nbsp;<Button tooltip="yes" {command}>{confirm}</Button>
     {/if}
 </div>

package/dist/components/editor/EmbedEditor.svelte

@@ -43,10 +43,10 @@ function handleImageChange(event) {
     });
 }
 function handleImageSelection(image) {
-    // Toggle the embed
     $caret?.edit(embed, embed.getURL() === image.url
-        ? embed.withURL('').withDescription('')
-        : embed.withURL(image.url));
+        ? // Toggle the embed if choosing the same image
+            embed.withURL('').withDescription('')
+        : embed.withURLs(image.url, image.thumb));
 }
 </script>
 

package/dist/components/editor/ImageChooser.svelte

@@ -1,8 +1,8 @@
 <script>import { onMount } from 'svelte';
-import { getBook, getCaret } from '../page/Contexts';
+import { getBook } from '../page/Contexts';
+import ImageThumbnail from './ImageThumbnail.svelte';
 export let select;
 export let selection;
-let editor = getCaret();
 let book = getBook();
 let images = undefined;
 let expanded = false;
@@ -37,18 +37,10 @@ onMount(() => {
             <!-- Sort the images by their URL. There's probably a more meaningful sort,
                     such as placing unused images at the front of the list. -->
             {#each images.sort((a, b) => a.url.localeCompare(b.url)) as image}
-                <img
-                    class={`bookish-image-chooser-image ${
-                        image.url === selection ? 'selected' : ''
-                    }`}
-                    src={image.url}
-                    alt={`Image named ${image.url}`}
-                    tabIndex="0"
-                    on:click|stopPropagation={() => select(image)}
-                    on:keydown={(event) =>
-                        event.key === 'Enter' || event.key === ' '
-                            ? select(image)
-                            : undefined}
+                <ImageThumbnail
+                    {image}
+                    selected={image.url === selection}
+                    {select}
                 />
             {:else}
                 No images uploaded
@@ -74,16 +66,4 @@ onMount(() => {
         height: auto;
         overflow-y: auto;
     }
-
-    .bookish-image-chooser-image {
-        display: inline-block;
-        height: 2em;
-        cursor: pointer;
-    }
-
-    .bookish-image-chooser-image.selected {
-        outline: var(--app-chrome-border-size) solid
-            var(--app-interactive-color);
-        outline-offset: calc(-1 * var(--app-chrome-border-size));
-    }
 </style>

package/dist/components/editor/ImageThumbnail.svelte

@@ -0,0 +1,61 @@
+<script>export let image;
+export let selected;
+export let select;
+let retries = 3;
+let error = false;
+let loading = true;
+function loadImage(url) {
+    retries--;
+    let img = new Image();
+    img.onerror = () => {
+        if (retries > 0) {
+            setTimeout(() => loadImage(url), 1000);
+        }
+        else {
+            loading = false;
+            error = true;
+        }
+    };
+    img.onload = () => {
+        loading = false;
+    };
+    img.src = url;
+}
+loadImage(image.thumb);
+</script>
+
+{#if loading}
+    <div class="thumbnail loading" />
+{:else}
+    <img
+        class="thumbnail"
+        class:selected
+        src={error ? image.url : image.thumb}
+        alt={`Image named ${image.url}`}
+        tabIndex="0"
+        on:click|stopPropagation={() => select(image)}
+        on:keydown={(event) =>
+            event.key === 'Enter' || event.key === ' '
+                ? select(image)
+                : undefined}
+    />
+{/if}
+
+<style>
+    .thumbnail {
+        display: inline-block;
+        height: 2em;
+        cursor: pointer;
+    }
+
+    .thumbnail.selected {
+        outline: var(--app-chrome-border-size) solid
+            var(--app-interactive-color);
+        outline-offset: calc(-1 * var(--app-chrome-border-size));
+    }
+
+    .loading {
+        width: 2.5em;
+        background: var(--app-chrome-background);
+    }
+</style>

package/dist/components/editor/ImageThumbnail.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Image } from '../../models/book/BookMedia';
+declare const __propDef: {
+    props: {
+        image: Image;
+        selected: boolean;
+        select: (image: Image) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageThumbnailProps = typeof __propDef.props;
+export type ImageThumbnailEvents = typeof __propDef.events;
+export type ImageThumbnailSlots = typeof __propDef.slots;
+export default class ImageThumbnail extends SvelteComponentTyped<ImageThumbnailProps, ImageThumbnailEvents, ImageThumbnailSlots> {
+}
+export {};

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/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/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/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/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>