bookish-press 0.5.1 → 0.5.4

package/README.md

@@ -1,7 +1,7 @@
 # Bookish
 
-Bookish is a simple framework and platforem for publishing online books. I originally created it to make it easier to maintain the many online books on my website (amyjko.com), while adding more sophisticated features to support reading. I'm slowly evolving it to be a simple free online service for authoring and reading online books.
+Bookish is a framework and platform for writing and publishing web-based books. I originally created it to make it easier to maintain the many online books on my website (amyjko.com), while adding more sophisticated features to support reading. I'm slowly evolving it to be a simple free online service for authoring and reading online books.
 
-## Project Status
+## Status
 
-This is very much an alpha that I use for my own book publishing. I have aspirations to make it usable for others in the future. Expect slow progress while I sneak in programming time on evenings and weekends. You can see where I'm headed by reading the issues and Backend project, which are somewhat organized.
+I'm working on a beta launch of the platform at [bookish.press](https://bookish.press) and expect to maintain the platform for the foreseeable future. Let me know if you'd like to help!

package/{package → dist}/components/BookPreview.svelte

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

package/{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/{package → dist}/components/chapter/Citations.svelte

@@ -110,8 +110,6 @@ afterUpdate(() => $chapter?.layoutMarginals());
     .bookish-references .bookish-reference {
         display: block;
         line-height: var(--bookish-paragraph-line-height-tight);
-        margin-left: 1rem;
-        margin-bottom: 1rem;
         text-align: left;
     }
 
@@ -125,7 +123,6 @@ afterUpdate(() => $chapter?.layoutMarginals());
     .bookish-reference .bookish-citation-symbol {
         display: block;
         float: left;
-        margin-top: -0.5em;
         position: absolute;
         left: -1.75em;
         text-align: right;

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

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

package/{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);

package/{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/{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/{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/{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/{package → dist}/components/chapter/Python.svelte

@@ -34,7 +34,7 @@ afterUpdate(() => {
     }
 });
 function skulptLoaded() {
-    return window.hasOwnProperty('Sk');
+    return typeof window !== 'undefined' && window.hasOwnProperty('Sk');
 }
 function reset() {
     code = startCode;
@@ -116,7 +116,7 @@ $: lines = output.split('\n');
         flex: 1;
         border: 1px solid lightGray;
         padding: 0.5rem;
-        height: 3rem;
+        height: 2rem;
         overflow-y: scroll;
         display: inline-block;
         vertical-align: top;

package/{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/{package → dist}/components/chapter/Table.svelte

@@ -14,7 +14,8 @@ $: rows = node.getRows();
         {#each rows as row, index}
             <tr class={editable ? 'editable' : null}>
                 {#if row.length === 1}
-                    <svelte:element this={index === 0 ? 'th' : 'td'}>
+                    <svelte:element
+                        this={index === 0 ? 'th' : 'td'}
                         colspan={rows.reduce(
                             (max, row) => Math.max(row.length, max),
                             0
@@ -37,4 +38,9 @@ $: rows = node.getRows();
     tr.editable th {
         border: 1px dotted var(--app-border-color);
     }
+
+    td,
+    th {
+        vertical-align: baseline;
+    }
 </style>

package/{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/{package → dist}/components/controls/DarkToggle.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        dark: Boolean;
+        dark: boolean;
         toggle: () => void;
     };
     events: {

package/{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/{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/{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/{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/{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 {};