bookish-press 0.5.2 → 0.5.5

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,13 +95,14 @@ function handleClick() {
         credit={imageOnly ? undefined : node.getCredit()}
     >
         {#if url.trim().length === 0}
-            {#if editable}
-                <p
+            {#if editable && editionEditable}
+                <div
+                    role="button"
                     class={`bookish-figure-unspecified ${
                         dragging ? 'bookish-figure-dragging' : ''
                     }`}
                     on:click|preventDefault={handleClick}
-                    tabIndex="0"
+                    tabindex="0"
                     on:keydown={(event) =>
                         event.key === ' ' || event.key === 'Enter'
                             ? handleClick()
@@ -113,7 +115,7 @@ function handleClick() {
                         : placeholder.length > 0
                         ? placeholder
                         : 'Click or drag to choose or upload an image, or enter an image or video URL.'}
-                </p>
+                </div>
             {:else}
                 <p class="bookish-figure-unspecified">No image or video</p>
             {/if}

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

@@ -32,6 +32,8 @@ function focusFigure() {
     <figure class="bookish-figure" data-nodeid={node.nodeID}>
         <div
             class:selected
+            role="button"
+            tabindex="0"
             on:mousedown={focusFigure}
             on:keydown={(event) =>
                 event.key === ' ' || event.key === 'Enter'
@@ -70,7 +72,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);
@@ -87,4 +88,8 @@ function focusFigure() {
         font-style: italic;
         font-size: var(--bookish-small-font-size);
     }
+
+    figcaption {
+        position: relative;
+    }
 </style>

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/Marginal.svelte

@@ -66,6 +66,8 @@ onMount(() => {
         editable ? '' : 'interactive'
     }`}
     aria-label={label}
+    role="button"
+    tabindex="0"
     on:mousedown={(event) => toggle(event, true)}
     on:keydown={(event) =>
         event.key === 'Enter' || event.key === ' '
@@ -77,7 +79,8 @@ onMount(() => {
     class={'bookish-marginal' +
         (isHidden ? ' bookish-marginal-hidden' : '') +
         (hovered ? ' bookish-marginal-hovered' : '')}
-    tabIndex={editable ? null : 0}
+    role="button"
+    tabindex={editable ? null : 0}
     on:mousedown={() => toggle(undefined, false)}
     on:keydown={(event) =>
         event.key === 'Enter' || event.key === ' '

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/chapter/Table.svelte

@@ -37,6 +37,10 @@ $: rows = node.getRows();
     tr.editable td,
     tr.editable th {
         border: 1px dotted var(--app-border-color);
+    }
+
+    td,
+    th {
         vertical-align: baseline;
     }
 </style>

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,
@@ -491,8 +484,8 @@ function handleKey(event, press = false) {
     const context = getCaretContext();
     if (context === undefined)
         return;
-    // Loop through the commands to see if there's a match.
-    const unmatched = commands.every((command) => {
+    // Find a command that handles the event.
+    const command = commands.find((command) => {
         // If the keystroke and caret position matches the command signature, execute the command and update the caret range.
         if ((command.press === undefined || command.press === press) &&
             (command.shift === undefined ||
@@ -510,19 +503,20 @@ function handleKey(event, press = false) {
             (command.active === true ||
                 (command.active instanceof Function &&
                     command.active.call(undefined, context, event.key)))) {
-            // Execute the command
-            const handled = executeCommand(command, event.key);
-            if (handled) {
+            // See if the command is handled
+            if (executeCommand(command, event.key)) {
                 event.preventDefault();
                 event.stopPropagation();
+                return true;
             }
-            // Stop searching for a matching command.
-            return handled;
+            // If not, this is not it.
+            else
+                return false;
         }
         // Continue searching for a matching command.
-        return true;
+        return false;
     });
-    if (unmatched) {
+    if (command === undefined) {
         // Toolbar navigation
         if (event.key === 'Escape') {
             // If we've selected a FootnoteNode or Comment, navigate to the footnote or comment text to edit it.
@@ -813,13 +807,14 @@ setContext('claimeditor', claimActiveEditor);
     class={`bookish-editor ${inAtom ? 'bookish-editor-atom-focused' : ''}`}
     class:locked
     aria-disabled={locked}
+    role="textbox"
     bind:this={element}
     on:keydown={handleKey}
     on:keypress={handlePress}
     on:mousedown|stopPropagation={handleMouseDown}
     on:focus={handleFocus}
     on:blur={handleBlur}
-    tabIndex="0"
+    tabindex="0"
 >
     <!-- A view of the root -->
     <svelte:component this={component} node={editedNode} {placeholder} />

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,8 +9,14 @@ let confirming = false;
     {#if !confirming}
         <Button {tooltip} command={() => (confirming = true)}><slot /></Button>
     {:else}
-        <Button tooltip="no" command={() => (confirming = false)}>no</Button
-        >&nbsp;<Button tooltip="yes" {command}>{confirm}</Button>
+        <Button tooltip="no" command={() => (confirming = false)}>cancel</Button
+        >&nbsp;<Button
+            tooltip="yes"
+            command={() => {
+                confirming = false;
+                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;
@@ -21,7 +21,8 @@ onMount(() => {
 
 <div
     class={`bookish-image-chooser ${expanded ? 'expanded' : ''}`}
-    tabIndex="0"
+    tabindex="0"
+    role="button"
     on:click={() => (expanded = !expanded)}
     on:keydown={(event) =>
         event.key === 'Enter' || event.key === ' '
@@ -37,18 +38,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 +67,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,65 @@
+<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}
+    <div
+        tabindex="0"
+        role="button"
+        on:click|stopPropagation={() => select(image)}
+        on:keydown={(event) =>
+            event.key === 'Enter' || event.key === ' '
+                ? select(image)
+                : undefined}
+    >
+        <img
+            class="thumbnail"
+            class:selected
+            src={error ? image.url : image.thumb}
+            alt={`Image named ${image.url}`}
+        />
+    </div>
+{/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) =>