bookish-press 0.4.231 → 0.5.0

package/{components → package/components}/chapter/Comment.svelte

@@ -3,17 +3,15 @@
 <script>import Atom from './Atom.svelte';
 import Marginal from './Marginal.svelte';
 import Format from './Format.svelte';
-import { getChapter, isEditable, getCaret, getEdition, } from '../page/Contexts';
+import { getChapter, isChapterEditable, getCaret, getEdition, getRoot, } from '../page/Contexts';
 import { afterUpdate } from 'svelte';
 import Icon from '../editor/Icon.svelte';
 import CommentIcon from '../editor/icons/comment.svg?raw';
 export let node;
 let chapter = getChapter();
-let edition = getEdition();
-let editable = isEditable();
+let editable = isChapterEditable();
+let root = getRoot();
 let caret = getCaret();
-$: chapterNode =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
 $: focused =
     $caret && $caret.range && node.contains($caret.range.start.node);
 // Position the marginals on every render.
@@ -25,9 +23,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
         <Marginal
             {node}
             id={'comment-' +
-                (chapterNode === undefined
-                    ? '?'
-                    : chapterNode.getComments().indexOf(node))}
+                ($root === undefined ? '?' : $root.getComments().indexOf(node))}
             label="comment, escape to edit"
         >
             <span slot="interactor" class="bookish-comment-symbol">
@@ -35,9 +31,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
             </span>
             <span
                 slot="content"
-                class={`bookish-app-comment ${
-                    focused ? 'bookish-app-comment-focused' : ''
-                }`}
+                class={`comment ${focused ? 'comment-focused' : ''}`}
             >
                 <Format node={node.getMeta()} placeholder="comment" />
             </span>
@@ -46,7 +40,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
 </Atom>
 
 <style>
-    .bookish-app-comment {
+    .comment {
         background: var(--app-chrome-background);
         border: var(--app-chrome-border-size) solid var(--app-border-color);
         border-radius: 0 var(--app-chrome-padding) var(--app-chrome-padding)
@@ -57,7 +51,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
         line-height: 1.5em;
     }
 
-    .bookish-app-comment-focused,
+    .comment-focused,
     .bookish-footnote-focused {
         outline: 2px solid var(--bookish-highlight-color);
     }

package/{components → package/components}/chapter/Definition.svelte

@@ -5,9 +5,10 @@ import Text from './Text.svelte';
 import Format from './Format.svelte';
 import Marginal from './Marginal.svelte';
 import Problem from './Problem.svelte';
-import { getChapter, getEdition } from '../page/Contexts';
+import { getChapter, getEdition, isChapterEditable, } from '../page/Contexts';
 import { afterUpdate } from 'svelte';
 export let node;
+let editable = isChapterEditable();
 let edition = getEdition();
 let chapter = getChapter();
 // Find the definition.
@@ -24,13 +25,17 @@ afterUpdate(() => $chapter?.layoutMarginals());
     <Marginal
         {node}
         id={'glossary-' + glossaryID}
-        label="definition: {entry.phrase}"
+        label={entry ? `definition: ${entry.phrase}` : 'undefined phrase'}
     >
         <Text slot="interactor" node={phrase} /><span
             slot="content"
             class="bookish-definition-entry"
             >{#if entry === undefined}<Problem
-                    >Unknown glossary entry "{glossaryID}"</Problem
+                    >{#if editable}{glossaryID.length === 0
+                            ? 'choose a definition'
+                            : `unknown glossary ID ${glossaryID}`}{:else}<em
+                            >missing definition</em
+                        >{/if}</Problem
                 >{:else}<strong class="bookish-definition-entry-phrase"
                     >{entry.phrase}</strong
                 >: <Format

package/{components → package/components}/chapter/Embed.svelte

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

package/{components → package/components}/chapter/Embed.svelte.d.ts

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

package/{components → package/components}/chapter/Figure.svelte

@@ -2,11 +2,11 @@
 
 <script>import Format from './Format.svelte';
 import Positioned from './Positioned.svelte';
-import { getCaret, isEditable } from '../page/Contexts';
+import { getCaret, isChapterEditable } from '../page/Contexts';
 export let node;
 export let caption;
 export let credit = undefined;
-let editable = isEditable();
+let editable = isChapterEditable();
 let caret = getCaret();
 $: selected = $caret?.range?.start.node === node;
 function focusFigure() {
@@ -41,12 +41,12 @@ function focusFigure() {
             <slot />
         </div>
         {#if caption !== undefined}
-            <figcaption class="bookish-figure-caption">
+            <figcaption class="caption">
                 {#if caption}
                     <Format node={caption} placeholder="caption" />
                 {/if}
                 {#if credit}
-                    <aside class="bookish-figure-credit">
+                    <aside class="credit">
                         <Format node={credit} placeholder="credit" />
                     </aside>
                 {/if}
@@ -68,7 +68,7 @@ function focusFigure() {
         filter: opacity(50%);
     }
 
-    .bookish-figure-caption {
+    .caption {
         text-align: center;
         position: relative;
         color: var(--bookish-muted-color);
@@ -78,11 +78,11 @@ function focusFigure() {
         margin-bottom: var(--bookish-block-padding);
     }
 
-    .bookish-figure-credit {
+    .credit {
         display: block;
         position: absolute;
-        top: -1em;
-        right: 0;
+        top: calc(-1.2 * var(--bookish-block-padding));
+        right: var(--bookish-block-padding);
         text-align: right;
         font-style: italic;
         font-size: var(--bookish-small-font-size);

package/{components → package/components}/chapter/Footnote.svelte

@@ -3,24 +3,22 @@
 <script>import Atom from './Atom.svelte';
 import Marginal from './Marginal.svelte';
 import Format from './Format.svelte';
-import { getChapter, getEdition, getCaret, } from '../page/Contexts';
+import { getChapter, getEdition, getCaret, getRoot, } from '../page/Contexts';
 import { afterUpdate } from 'svelte';
 export let node;
 $: content = node.getMeta();
 let caret = getCaret();
 let chapter = getChapter();
 let edition = getEdition();
+let root = getRoot();
 // What footnote number is this?
-$: ast =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
-$: number = ast?.getFootnotes().indexOf(node);
+$: number = $root.getFootnotes().indexOf(node);
 $: letter =
     number === undefined ? undefined : $edition?.getFootnoteSymbol(number);
 $: focused =
-    ast &&
-        $caret &&
+    $caret &&
         $caret.range &&
-        $caret.range.start.node.hasAncestor(ast, node);
+        $caret.range.start.node.hasAncestor($root, node);
 // Position the marginals on every render.
 afterUpdate(() => $chapter?.layoutMarginals());
 </script>
@@ -32,17 +30,16 @@ afterUpdate(() => $chapter?.layoutMarginals());
             id={'footnote-' + number}
             label="footnote, press escape to edit"
         >
-            <sup slot="interactor" class="bookish-footnote-symbol">{letter}</sup
-            >
             <!-- We prevent default on the span to prevent mouse events from bubbling up to the footnote symbol. This is key for two reasons:
                  1) clicks on the footnote select the footnote atom node itself
                  2) we want to be able to click on footnote text and we can't do that if the footnote sets the caret to the atom after clicks. -->
+            <sup slot="interactor" class="bookish-footnote-symbol">{letter}</sup
+            >
             <span
                 slot="content"
                 class={`bookish-footnote ${
                     focused ? 'bookish-footnote-focused' : ''
                 }`}
-                on:mousedown|preventDefault
             >
                 <sup class="bookish-footnote-symbol">{letter}</sup><Format
                     node={content}
@@ -54,6 +51,10 @@ afterUpdate(() => $chapter?.layoutMarginals());
 </Atom>
 
 <style>
+    sup {
+        line-height: 0;
+    }
+
     .bookish-footnote-focused {
         outline: 2px solid var(--bookish-highlight-color);
     }
@@ -65,7 +66,7 @@ afterUpdate(() => $chapter?.layoutMarginals());
         color: var(--bookish-paragraph-color);
         font-weight: 300;
         font-size: var(--bookish-small-font-size);
-        line-height: 1.5em;
+        /* line-height: 1.5em; */
     }
 
     .bookish-footnote-symbol {
@@ -75,26 +76,14 @@ afterUpdate(() => $chapter?.layoutMarginals());
         position: relative;
     }
 
-    /* This enables us to layout the numbers and letters in a neat right-aligned floating grid. */
-    .bookish-footnote {
-        position: relative;
-    }
-
     .bookish-footnote {
         display: block;
         line-height: var(--bookish-paragraph-line-height-tight);
-        margin-left: 1rem;
-        margin-bottom: 1rem;
-        text-align: left;
     }
 
     .bookish-footnote .bookish-footnote-symbol {
         display: block;
         float: left;
-        margin-top: -0.5em;
-        position: absolute;
-        left: -1.75em;
-        text-align: right;
-        width: 1.5em; /* Just enough space for 2 digits, a bit of a hack */
+        margin-left: -1em;
     }
 </style>

package/{components → package/components}/chapter/Footnote.svelte.d.ts

@@ -5,8 +5,6 @@ declare const __propDef: {
         node: FootnoteNode;
     };
     events: {
-        mousedown: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/{components → package/components}/chapter/Format.svelte

@@ -19,10 +19,9 @@ import Link from './Link.svelte';
 import Comment from './Comment.svelte';
 import Text from './Text.svelte';
 import Format from './Format.svelte';
-import { isEditable } from '../page/Contexts';
+import { isChapterEditable, isEditionEditable } from '../page/Contexts';
 export let node;
 export let placeholder = undefined;
-let editable = isEditable();
 $: format = node.getFormat();
 $: tag =
     format === '*'
@@ -35,7 +34,9 @@ $: tag =
                     ? 'sub'
                     : 'span';
 $: showPlaceholder =
-    node.isEmptyText() && placeholder !== undefined && editable;
+    node.isEmptyText() &&
+        placeholder !== undefined &&
+        (isChapterEditable() || isEditionEditable());
 </script>
 
 <svelte:element
@@ -46,7 +47,7 @@ $: showPlaceholder =
     {#each node.getSegments() as segment (segment.nodeID)}
         {#if segment instanceof TextNode}<Text
                 node={segment}
-                placeholder={node.getSegments().length === 1
+                placeholder={showPlaceholder && node.getSegments().length === 1
                     ? placeholder
                     : undefined}
             />

package/{components → package/components}/chapter/InlineCode.svelte

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

package/{components → package/components}/chapter/Label.svelte

@@ -1,18 +1,16 @@
 <svelte:options immutable={true} />
 
 <script>import Atom from './Atom.svelte';
-import { getChapter, getEdition, isEditable } from '../page/Contexts';
+import { getChapter, getRoot, isChapterEditable } from '../page/Contexts';
 import Problem from './Problem.svelte';
 export let node;
-let editable = isEditable();
+let editable = isChapterEditable();
 let chapter = getChapter();
-let edition = getEdition();
-$: ast =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+let root = getRoot();
 $: duplicate =
-    ast === undefined
+    $root === undefined
         ? false
-        : ast.getLabels().filter((l) => l.getMeta() === node.getMeta())
+        : $root.getLabels().filter((l) => l.getMeta() === node.getMeta())
             .length > 1;
 </script>
 

package/{components → package/components}/chapter/Link.svelte

@@ -1,11 +1,11 @@
 <svelte:options immutable={true} />
 
-<script>import { getBase, getEdition, isEditable } from '../page/Contexts';
+<script>import { getBase, getEdition, isChapterEditable } from '../page/Contexts';
 import Text from './Text.svelte';
 import Problem from './Problem.svelte';
 export let node;
 let base = getBase();
-let editable = isEditable();
+let editable = isChapterEditable();
 let edition = getEdition();
 $: url = node.getMeta();
 $: content = node.getText();
@@ -35,20 +35,22 @@ function isInvalidChapterLink() {
     <a href={url} target="_blank" rel="noreferrer"><Text node={content} /></a>
     <!-- If's a chapter link with a label -->
 {:else if url.indexOf(':') >= 0}
-    <!-- If the chapter isn't specified, set to the current chapter's id. -->
     {#if url.split(':')[0] === ''}
+        <!-- If the chapter isn't specified, assume this chapter. -->
         <a href={'#' + url.split(':')[1]}><Text node={content} /></a>
     {:else}
-        <a href={'/' + url.split(':')[0] + '#' + url.split(':')[1]}
+        <!-- If it is specified, include the base relative chapter ID and the label -->
+        <a href={`${$base}/${url.split(':')[0]}#${url.split(':')[1]}`}
             ><Text node={content} /></a
         >
     {/if}
-    <!-- If this is internal link, make a route link to the chapter. -->
 {:else}
-    <a href={$base + '/' + url}><Text node={content} /></a>
+    <!-- If this is internal link, make a route link to the chapter. -->
+    <a href={`${$base}/${url}`}><Text node={content} /></a>
 {/if}
 
 <style>
+    a,
     .bookish-editor-link {
         color: var(--bookish-link-color);
         font-weight: var(--bookish-link-font-weight);

package/{components → package/components}/chapter/List.svelte

@@ -19,6 +19,11 @@ export let node;
 </svelte:element>
 
 <style>
+    ol,
+    ul {
+        line-height: var(--bookish-paragraph-line-height-tight);
+    }
+
     ol {
         list-style: none;
         counter-reset: item;

package/{components → package/components}/chapter/Marginal.svelte

@@ -2,13 +2,14 @@
 
 <script>import { isMobile, watchMobile } from '../../util/isMobile';
 import { onMount } from 'svelte';
-import { getCaret, getChapter, isEditable, } from '../page/Contexts';
+import { getCaret, getChapter, isChapterEditable, } from '../page/Contexts';
+import AtomNode from '../../models/chapter/AtomNode';
 export let node;
 export let id;
 export let label;
 let hovered = false;
 let chapter = getChapter();
-$: editable = isEditable();
+$: editable = isChapterEditable();
 let caret = getCaret();
 // If there's no marginal selected or this is different from the current selection, this is hidden.
 $: selectedMarginal = $chapter?.marginal;
@@ -20,9 +21,23 @@ $: isHidden = editable
                 .some((ancestor) => ancestor === node))
     : // If not editable, it's hidden if it's not selected.
         $selectedMarginal !== id;
-function toggle() {
-    if (editable)
-        return;
+function toggle(event, interactor) {
+    if (editable) {
+        if (interactor) {
+            if (editable && $caret && node instanceof AtomNode) {
+                // Select this so that the view stays focused.
+                $caret.setCaret({
+                    start: { node, index: 0 },
+                    end: { node, index: 0 },
+                });
+                if (event) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+            }
+            return;
+        }
+    }
     if ($chapter) {
         if (isMobile() && isHidden)
             $chapter.marginal.set(id);
@@ -39,8 +54,8 @@ function handleExit() {
 }
 onMount(() => {
     const mediaWatch = watchMobile();
-    mediaWatch.addEventListener('change', toggle);
-    return () => mediaWatch.removeEventListener('change', toggle);
+    mediaWatch.addEventListener('change', () => toggle(undefined, false));
+    return () => mediaWatch.removeEventListener('change', () => toggle(undefined, false));
 });
 </script>
 
@@ -51,10 +66,11 @@ onMount(() => {
         editable ? '' : 'interactive'
     }`}
     aria-label={label}
-    tabIndex="0"
-    on:mousedown={toggle}
+    on:mousedown={(event) => toggle(event, true)}
     on:keydown={(event) =>
-        event.key === 'Enter' || event.key === ' ' ? toggle() : undefined}
+        event.key === 'Enter' || event.key === ' '
+            ? toggle(undefined, true)
+            : undefined}
     on:mouseenter={handleEnter}
     on:mouseleave={handleExit}><slot name="interactor" /></span
 ><span
@@ -62,9 +78,11 @@ onMount(() => {
         (isHidden ? ' bookish-marginal-hidden' : '') +
         (hovered ? ' bookish-marginal-hovered' : '')}
     tabIndex={editable ? null : 0}
-    on:mousedown={toggle}
+    on:mousedown={() => toggle(undefined, false)}
     on:keydown={(event) =>
-        event.key === 'Enter' || event.key === ' ' ? toggle() : undefined}
+        event.key === 'Enter' || event.key === ' '
+            ? toggle(undefined, false)
+            : undefined}
     on:mouseenter={handleEnter}
     on:mouseleave={handleExit}
 >

package/{components → package/components}/chapter/Paragraph.svelte

@@ -1,24 +1,21 @@
 <svelte:options immutable={true} />
 
 <script>import Format from './Format.svelte';
-import { getChapter, getEdition } from '../page/Contexts';
+import { getChapter, getEdition, getRoot } from '../page/Contexts';
 export let node;
 export let placeholder = undefined;
 $: level = node.getLevel();
-$: chapter = getChapter();
-$: edition = getEdition();
+let chapter = getChapter();
+let edition = getEdition();
+let root = getRoot();
 $: id =
-    node.getLevel() === 0 ||
-        $chapter === undefined ||
-        $edition === undefined
+    node.getLevel() === 0 || $edition === undefined
         ? undefined
-        : 'header-' +
-            ($chapter.chapter.getAST($edition)?.getHeaders().indexOf(node) ??
-                '');
+        : 'header-' + ($root.getHeaders().indexOf(node) ?? '');
 $: classes =
     node.getLevel() === 0
         ? undefined
-        : 'bookish-header' +
+        : 'page-header' +
             ($chapter && $chapter.highlightedID === id
                 ? ' bookish-content-highlight'
                 : '');
@@ -56,6 +53,22 @@ $: classes =
         min-height: var(--bookish-paragraph-line-height);
     }
 
+    /* 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 {
+        padding: 0 0.25rem;
+        margin: 0 0.25rem 0 0;
+        font-size: 4rem;
+        font-weight: 700;
+        float: left;
+        line-height: 1;
+        color: var(--bookish-paragraph-color);
+    }
+
+    .placeholder {
+        color: var(--bookish-muted-color);
+        font-style: italic;
+    }
+
     h2,
     h3,
     h4,