bookish-press 0.5.62 → 0.5.73

package/README.md

@@ -4,4 +4,33 @@ Bookish is a framework and platform for writing and publishing web-based books.
 
 ## Status
 
-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!
+I'm working on a 1.0 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!
+
+## Deployment notes
+
+There are two major components to Bookish: the authoring platform and the reading front end. Changes to the authoring platform that do not affect reading can be verified and deployed to Firebase without any other coordination. However, changes to the reading experience have downstream dependencies that need to be managed. Here's the general deployment workflow, which I'm currently using as reminders for myself:
+
+0. Ensure you're working in the `dev` branch
+1. Fix bugs, add features
+2. Ensure there are no type errors (`npm run check`) or failed tests (`npm run test`).
+2. Test with emulator (`npm run emu`), if possible. (Some features aren't possible to perfectly emulate, such as authentication, hosting configurations, permissions.)
+3. Test on the [staging server](https://bookish-dev-21ac3.web.app/`) (`npm run stage`).
+4. Bump the version in `package.json`
+5. Describe the changes in `CHANGELOG.md`, linking to any issues closed
+6. Commit changes to `dev`, referring to any issues addressed
+7. Release to production (`npm run release`)
+8. Verify the change in production on [bookish.press](https://bookish.press)
+9. Merge dev to main (`npm run merge`)
+10. If any of the changes affected the reading experience (essentially if any `.svelte` file or its dependencies in `/src/lib/components` changed), then we need to update the reader package for authors who pre-build their books manually:
+    1. Update the bookish package with the Sveltekit package tooling (`npm run package`)
+    2. Publish the package to npm (`npm publish`)
+    3. Open the `bookish-reader` repository
+    4. Pull the revisions (`npm update`), ensuring you update the repository's `package.json` dependencies, in case there was a major version change
+    5. Update reader's `CHANGELOG.md` to describe any changes.
+    6. Bump the reader's version in `package.json`
+    7. Commit the changes directly to `main`, and sync them
+    8. For any of these changes to make it to pre-built books, authors need ot use the updated `bookish-reader` repo to rebuild their books. That generally involves:
+        1. Cloning the reader repo: `git clone https://github.com/amyjko/bookish-reader`
+        2. Entering the repo directory: `cd bookish-reader`
+        3. Binding the book: `bind.sh`
+        4. Deploying the bound book in the newly created `build` folder to wherever it's hosted.

package/dist/components/app/Options.svelte

@@ -20,5 +20,6 @@ export let label;
         padding: var(--app-chrome-padding);
         font-family: var(--app-font);
         font-size: var(--app-chrome-font-size);
+        max-width: 10em;
     }
 </style>

package/dist/components/app/Table.svelte

@@ -9,7 +9,6 @@
         width: 100%;
         overflow-x: auto;
         margin-top: var(--app-text-spacing);
-        margin-bottom: var(--app-text-spacing);
         border-top: var(--app-chrome-border-size) solid var(--app-border-color);
         border-bottom: var(--app-chrome-border-size) solid
             var(--app-border-color);

package/dist/components/chapter/CaptionedCode.svelte

@@ -5,35 +5,22 @@ import Python from './Python.svelte';
 import Text from './Text.svelte';
 import { isChapterEditable } from '../page/Contexts';
 import Figure from './Figure.svelte';
-import { getCaret } from '../page/Contexts';
+import Button from '../app/Button.svelte';
 export let node;
 $: language = node.getLanguage();
 let editable = isChapterEditable();
 // const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
-let caret = getCaret();
-$: inside =
-    $caret?.range?.start.node === node.getCodeNode() ||
-        $caret?.range?.end.node === node.getCodeNode();
+let editing = true;
 </script>
 
-<Figure {node} caption={node.getCaption()}>
-    {#if editable}
-        <div class="container">
+<Figure {node} caption={node.getCaption()} focusable={false}>
+    {#if editable && editing}
+        <div class="container" class:editing>
             <code
-                class={`bookish-code bookish-code-block language-${language} ${
-                    !inside ? 'hidden' : ''
-                }`}
+                class={`bookish-code bookish-code-block language-${language}`}
             >
                 <Text node={node.getCodeNode()} />
             </code>
-            <div class="code" class:inside>
-                <Code
-                    editable={false}
-                    inline={false}
-                    language={node.getLanguage()}
-                    nodeID={node.getCodeNode().nodeID}>{node.getCode()}</Code
-                >
-            </div>
         </div>
     {:else if node.getLanguage() === 'python' && node.isExecutable()}
         <Python {node} startCode={node.getCode()} />
@@ -45,6 +32,15 @@ $: inside =
             nodeID={node.getCodeNode().nodeID}>{node.getCode()}</Code
         >
     {/if}
+    {#if editable}
+        <Button
+            tooltip={editing ? 'stop editing' : 'start editing'}
+            command={() => {
+                editing = !editing;
+            }}
+            >{#if editing}done{:else}edit{/if}</Button
+        >
+    {/if}
     {#if node.getLanguage() !== 'plaintext'}<aside class="language"
             >{node.getLanguage()}</aside
         >{/if}
@@ -66,6 +62,12 @@ $: inside =
     .container {
         position: relative;
     }
+
+    .container.editing {
+        border: 1px solid var(--app-interactive-color);
+        border-radius: var(--app-chrome-roundedness);
+    }
+
     .code {
         position: absolute;
         top: 0;

package/dist/components/chapter/Figure.svelte

@@ -6,6 +6,7 @@ import { getCaret, isChapterEditable } from '../page/Contexts';
 export let node;
 export let caption;
 export let credit = undefined;
+export let focusable = true;
 let editable = isChapterEditable();
 let caret = getCaret();
 $: selected = $caret?.range?.start.node === node;
@@ -30,11 +31,12 @@ function focusFigure() {
 
 <Positioned position={node.getPosition()}>
     <figure class="bookish-figure" data-nodeid={node.nodeID}>
+        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
         <div
             class:selected
-            role="button"
-            tabindex="0"
-            on:mousedown={focusFigure}
+            role={focusable ? 'button' : undefined}
+            tabindex={focusable ? 0 : undefined}
+            on:mousedown={focusable ? focusFigure : null}
             on:keydown={(event) =>
                 event.key === ' ' || event.key === 'Enter'
                     ? focusFigure()

package/dist/components/chapter/Figure.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         node: TableNode | EmbedNode | CodeNode;
         caption: FormatNode | undefined;
         credit?: FormatNode | undefined;
+        focusable?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/chapter/Link.svelte

@@ -18,6 +18,10 @@ function isInvalidChapterLink() {
             let parts = chapter.split(':');
             chapter = parts[0];
         }
+        else if (url.indexOf('#') >= 0) {
+            let parts = chapter.split('#');
+            chapter = parts[0];
+        }
         if (chapter !== '' && !$edition?.hasChapter(chapter))
             return true;
     }

package/dist/components/chapter/Paragraph.svelte

@@ -98,4 +98,22 @@ $: dropcap =
         font-size: var(--bookish-header-3-font-size);
         font-style: italic;
     }
+
+    h5 {
+        font-size: var(--bookish-paragraph-font-size);
+        display: inline;
+    }
+
+    h5::after {
+        content: '. ';
+    }
+
+    h5 + :global(p) {
+        display: inline;
+    }
+
+    h5 + :global(p::after) {
+        content: '\0A';
+        display: block;
+    }
 </style>

package/dist/components/chapter/Table.svelte

@@ -9,7 +9,7 @@ let editable = isChapterEditable();
 $: rows = node.getRows();
 </script>
 
-<Figure {node} caption={node.getCaption()}>
+<Figure {node} caption={node.getCaption()} focusable={false}>
     <Rows>
         {#each rows as row, index}
             <tr class={editable ? 'editable' : null}>

package/dist/components/editor/BookishEditor.svelte

@@ -18,6 +18,7 @@ import commands from './Commands';
 import { afterUpdate, onMount, setContext } from 'svelte';
 import { getCaret } from '../page/Contexts';
 import CaretView from './CaretView.svelte';
+import Parser, { Reserved } from '../../models/chapter/Parser';
 const IDLE_TIME = 500;
 export let text;
 export let parser;
@@ -698,14 +699,22 @@ function handleCopy(node) {
         window.alert("Your browser doesn't support copying to the clipboard :(");
 }
 function handlePaste(context, text, save) {
+    // If we're pasting a node, see what will accept it.
     if (text instanceof BookishNode)
         return handlePasteNode(context, text, save);
-    const plain = text.plain === undefined ? undefined : new TextNode(text.plain);
-    if (plain) {
-        const edit = handlePasteNode(context, plain, save);
-        if (edit)
-            return edit;
-    }
+    if (text.plain === undefined)
+        return undefined;
+    // Escape all reserved Bookdown characters.
+    const escaped = text.plain.replaceAll(Reserved, '\\$1');
+    const chapter = 
+    // If we're pasting text into a paragraph node, then we parse it as a series of paragraphs.
+    context.block instanceof ParagraphNode
+        ? Parser.parseChapter(undefined, escaped)
+        : // Otherwise parse as just a format node, replacing all text newlines with a space.
+            Parser.parseFormat(undefined, escaped.replaceAll('\n', ' '));
+    const edit = handlePasteNode(context, chapter, save);
+    if (edit)
+        return edit;
     return undefined;
 }
 function handlePasteNode(context, node, save) {

package/dist/components/editor/CaretView.svelte

@@ -1,4 +1,4 @@
-<script>import { afterUpdate } from 'svelte';
+<script>import { afterUpdate, tick } from 'svelte';
 export let left;
 export let top;
 export let height;
@@ -11,9 +11,14 @@ export let blink;
 export let locked;
 let element;
 let headerHeight = 0;
-// When the caret updates, make sure it's in view.
+// When the caret updates position, scroll the element into view after the render is complete.
+$: {
+    left;
+    top;
+    tick().then(() => element ? element.scrollIntoView({ block: 'nearest' }) : undefined);
+}
+/** Keep track of the header height, so we can snap to the caret position. */
 afterUpdate(() => {
-    element?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     headerHeight =
         document.querySelector('.bookish-app > .header')
             ?.offsetHeight ?? 0;

package/dist/components/editor/Commands.js

@@ -35,6 +35,7 @@ import FootnoteIcon from './icons/footnote.svg?raw';
 import Header1Icon from './icons/header1.svg?raw';
 import Header2Icon from './icons/header2.svg?raw';
 import Header3Icon from './icons/header3.svg?raw';
+import Header4Icon from './icons/header4.svg?raw';
 import IndentIcon from './icons/indent.svg?raw';
 import ItalicIcon from './icons/italic.svg?raw';
 import LabelIcon from './icons/label.svg?raw';
@@ -79,10 +80,10 @@ function deleteTableRowColumn(context, table, format, row) {
         ? table.withoutRow(location.row)
         : table.withoutColumn(location.column), (t) => {
         return (row
-            ? t.getCell(location.row === table.getRowCount()
+            ? t.getCell(location.row === table.getRowCount() - 1
                 ? location.row - 1
                 : location.row, location.column)
-            : t.getCell(location.row, location.column === table.getColumnCount()
+            : t.getCell(location.row, location.column === table.getColumnCount() - 1
                 ? location.column - 1
                 : location.column))?.getFirstCaret();
     });
@@ -1109,7 +1110,10 @@ const commands = [
         active: (context) => context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        handler: (context) => context.root.withSegmentAtSelection(context.range, (text) => new CommentNode(new FormatNode('', [new TextNode(text)]))),
+        handler: (context) => context.root.withSegmentAtSelection({
+            start: context.root.sortRange(context.range).end,
+            end: context.root.sortRange(context.range).end,
+        }, (text) => new CommentNode(new FormatNode('', [new TextNode(text)]))),
     },
     {
         icon: ParagraphIcon,
@@ -1172,6 +1176,20 @@ const commands = [
             context.paragraph.getLevel() !== 3,
         handler: (context) => rootWithNode(context, context.paragraph, context.paragraph?.withLevel(3)),
     },
+    {
+        icon: Header4Icon,
+        description: 'format as 4rd level header',
+        category: 'level',
+        mutates: true,
+        control: true,
+        alt: true,
+        shift: false,
+        code: 'Digit4',
+        visible: (context) => context.paragraph !== undefined,
+        active: (context) => context.paragraph !== undefined &&
+            context.paragraph.getLevel() !== 4,
+        handler: (context) => rootWithNode(context, context.paragraph, context.paragraph?.withLevel(4)),
+    },
     {
         icon: RuleIcon,
         description: 'insert horizontal rule',
@@ -1471,7 +1489,7 @@ const commands = [
                                         const text = await blob.text();
                                         contents.plain = text;
                                     }
-                                    context.handlePaste(context, contents, true);
+                                    return context.handlePaste(context, contents, true);
                                 }
                                 catch (err) { }
                             }

package/dist/components/editor/LinkEditor.svelte

@@ -55,12 +55,25 @@ $: {
     // Add an option for each chapter and it's labels.
     if ($edition) {
         for (const chap of $edition?.getChapters() ?? []) {
+            // Include the chapter itself
             options.push([`Chapter: ${chap.getTitle()}`, chap.getID()]);
-            for (const label of chap.getAST($edition)?.getLabels() ?? [])
-                options.push([
-                    chap.getTitle() + ': ' + label.getMeta(),
-                    `${chap.getID()}:${label.getMeta()}`,
-                ]);
+            const root = chap.getAST($edition);
+            if (root) {
+                // Include the chapter's headers
+                const headers = root.getHeaders();
+                for (let number = 0; number < headers.length; number++) {
+                    options.push([
+                        chap.getTitle() + ': ' + headers[number].toText(),
+                        `${chap.getID()}#header-${number}`,
+                    ]);
+                }
+                // Include all of the labels in the chapter
+                for (const label of root.getLabels())
+                    options.push([
+                        chap.getTitle() + ': ' + label.getMeta(),
+                        `${chap.getID()}:${label.getMeta()}`,
+                    ]);
+            }
         }
     }
 }

package/dist/components/editor/icons/header4.svg

@@ -0,0 +1,7 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+    <g transform="scale(0.5 0.5)" transform-origin="7 12">
+        <line x1="3" y1="2" x2="3" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line>
+        <line x1="3" y1="7" x2="11" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line>
+        <line x1="11" y1="2" x2="11" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line>
+    </g>
+</svg>

package/dist/components/page/Analytics.svelte

@@ -0,0 +1,19 @@
+<script>/** By default, we use the Bookish.press Google Analytics tag */
+export let gtagid = null;
+$: id = gtagid ?? 'G-BGFDV229BN';
+</script>
+
+<svelte:head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id={id}">
+    </script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
+        gtag('js', new Date());
+        gtag('config', id);
+    </script>
+</svelte:head>

package/dist/components/page/Analytics.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /** By default, we use the Bookish.press Google Analytics tag */ gtagid?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AnalyticsProps = typeof __propDef.props;
+export type AnalyticsEvents = typeof __propDef.events;
+export type AnalyticsSlots = typeof __propDef.slots;
+export default class Analytics extends SvelteComponent<AnalyticsProps, AnalyticsEvents, AnalyticsSlots> {
+}
+export {};

package/dist/components/page/BulkReferenceEditor.svelte

@@ -39,7 +39,7 @@ function handleEmptyAdd() {
     command={handleBulkAdd}>+ bulk references</Button
 >
 <Button tooltip="add empty reference" command={handleEmptyAdd}
-    >+ reference</Button
+    >+ empty reference</Button
 >
 
 <style>

package/dist/components/page/Chapter.svelte

@@ -213,8 +213,8 @@ let editable = isBookEditable() ||
             <Outline
                 slot="outline"
                 collapse={$marginal !== undefined}
-                previous={$edition.getPreviousChapterID(chapterID)}
-                next={$edition.getNextChapterID(chapterID)}
+                previous={$edition.getPreviousChapterID(chapterID, editable)}
+                next={$edition.getNextChapterID(chapterID, editable)}
                 listener={(expanded) => {
                     // If the outline is being expanded, hide the marginal, otherwise leave it alone.
                     if (expanded) marginal.set(undefined);
@@ -331,9 +331,8 @@ let editable = isBookEditable() ||
                 {:else}
                     <ChapterBody node={chapterAST} />
                 {/if}
-            {:else}
-                <span>Loading...</span>
-            {/if}
+            {:else if $edition === undefined}Loading...{:else}Unable to load
+                chapter text{/if}
         </section>
 
         {#if citations && citations.size > 0}

package/dist/components/page/DefinitionView.svelte

@@ -62,6 +62,7 @@ $: syns = definition.synonyms || [];
             {#if editable}
                 <TextEditor
                     text={definition.phrase}
+                    saveOnExit
                     label={'Glossary phrase editor.'}
                     placeholder="phrase"
                     valid={(text) => {
@@ -74,7 +75,7 @@ $: syns = definition.synonyms || [];
                                       phrase: text,
                                       definition: definition.definition,
                                       synonyms: definition.synonyms,
-                                  })
+                                  }),
                               )
                             : undefined}
                 />
@@ -106,7 +107,7 @@ $: syns = definition.synonyms || [];
                                       phrase: definition.phrase,
                                       definition: node.toBookdown(),
                                       synonyms: definition.synonyms,
-                                  })
+                                  }),
                               )
                             : undefined}
                     chapter={false}
@@ -122,7 +123,7 @@ $: syns = definition.synonyms || [];
                 <Format
                     node={Parser.parseFormat(
                         undefined,
-                        definition.definition
+                        definition.definition,
                     ).withTextIfEmpty()}
                 />
             {/if}

package/dist/components/page/Edition.svelte

@@ -8,7 +8,7 @@ import { isDark, setDark } from '../../util/dark';
 import { page } from '$app/stores';
 // Poly fill smooth scrolling for Safari.
 onMount(() => smoothscroll.polyfill());
-// The book edition to render.
+// The book and edition to render
 export let edition;
 // The base path allows links to adjust to different routing contexts in which a book is placed.
 // For example, when the book is hosted alone, all routes might start with the bare root "/",
@@ -79,8 +79,8 @@ function toRules(set) {
 }
 </script>
 
-<!-- Keep the imports up to date -->
 <svelte:head>
+    <!-- Keep the imports up to date -->
     {@html '<' + `style>${themeCSS}</style>`}
 
     <meta property="og:title" content={edition.getTitle()} />

package/dist/components/page/EditionLoader.svelte

@@ -4,12 +4,13 @@ import Feedback from '../app/Feedback.svelte';
 import { getBook, getEdition, getUser, getChapterText, } from './Contexts';
 import { onDestroy } from 'svelte';
 import { page } from '$app/stores';
-import { deleteChapterText, listenToChapters, listenToEdition, } from '../../models/CRUD';
+import { listenToChapters, listenToEdition } from '../../models/CRUD';
 export let write;
 let auth = getUser();
 let book = getBook();
 let edition = getEdition();
-let chapterText = getChapterText();
+/** Mapping from Firestore docuemnt IDs to chapter text */
+let chapterText = new Map();
 let editionUnsub = undefined;
 let chaptersUnsub = undefined;
 let error = undefined;
@@ -54,9 +55,7 @@ function listen() {
             editionUnsub = listenToEdition($book.getID(), editionID, (ed) => {
                 if (ed) {
                     // Before setting the new edition, augmented it with the chapter text.
-                    edition.set($chapterText
-                        ? ed.withChapterText($chapterText)
-                        : ed);
+                    edition.set(ed.withChapterText(chapterText));
                 }
                 else {
                     edition.set(undefined);
@@ -64,20 +63,12 @@ function listen() {
                 }
             });
             chaptersUnsub = listenToChapters($book.getID(), editionID, (chapters) => {
-                // Update the chapter text store.
-                chapterText.set(chapters);
+                // Update the text of the chapters we received.
+                for (const [ref, text] of chapters)
+                    chapterText.set(ref.id, text);
                 // Update the chapter text in the current edition.
-                if ($edition) {
-                    const newEdition = $edition.withChapterText(chapters);
-                    if (newEdition !== $edition)
-                        edition.set(newEdition);
-                    // Get all the chapters in the updated chapter list and
-                    // delete the ones not referenced by the edition.
-                    chapters
-                        .filter(([ref]) => $edition &&
-                        !$edition.hasChapterRefID(ref.id))
-                        .forEach(([ref]) => deleteChapterText(ref));
-                }
+                if ($edition)
+                    edition.set($edition.withChapterText(chapterText));
             });
         }
     }

package/dist/components/page/Editions.svelte

@@ -1,7 +1,7 @@
 <script>import { createNewEdition } from '../../models/CRUD';
 import Instructions from './Instructions.svelte';
 import Note from '../editor/Note.svelte';
-import { getBook, isBookEditable } from './Contexts';
+import { getBook, getUser, isBookEditable } from './Contexts';
 import Button from '../app/Button.svelte';
 import Link from '../app/Link.svelte';
 import Format from '../chapter/Format.svelte';
@@ -10,6 +10,7 @@ import Permissions from '../editor/Permissions.svelte';
 export let editors = true;
 let book = getBook();
 let editable = isBookEditable();
+let user = getUser();
 $: editions = $book?.getEditions();
 $: latestPublishedID = $book?.getLatestPublishedEditionID();
 async function handleDraftEdition() {
@@ -48,7 +49,7 @@ async function handleDraftEdition() {
                 ? 'rd'
                 : 'th')}
 
-        {#if $book && (editable || edition.published)}
+        {#if $book && (editable || edition.published || ($user?.user?.uid && edition.editionuids.includes($user.user.uid)))}
             <section class="edition">
                 <h3
                     >{editionLabel}
@@ -68,7 +69,7 @@ async function handleDraftEdition() {
                                       }`}
                                 external>read</Link
                             >{/if}
-                        {#if editable}
+                        {#if editable || ($user?.user?.uid && edition.editionuids.includes($user?.user.uid))}
                             &nbsp;
                             <Link
                                 to={`/write/${$book.getID()}/${

package/dist/components/page/Glossary.svelte

@@ -50,8 +50,14 @@ function addEmptyDefinition() {
         >
             <Outline
                 slot="outline"
-                previous={$edition.getPreviousChapterID(ChapterIDs.GlossaryID)}
-                next={$edition.getNextChapterID(ChapterIDs.GlossaryID)}
+                previous={$edition.getPreviousChapterID(
+                    ChapterIDs.GlossaryID,
+                    editable
+                )}
+                next={$edition.getNextChapterID(
+                    ChapterIDs.GlossaryID,
+                    editable
+                )}
             />
         </Header>
         {#if editable}

package/dist/components/page/Index.svelte

@@ -57,8 +57,11 @@ $: {
         >
             <Outline
                 slot="outline"
-                previous={$edition.getPreviousChapterID(ChapterIDs.IndexID)}
-                next={$edition.getNextChapterID(ChapterIDs.IndexID)}
+                previous={$edition.getPreviousChapterID(
+                    ChapterIDs.IndexID,
+                    editable
+                )}
+                next={$edition.getNextChapterID(ChapterIDs.IndexID, editable)}
             />
         </Header>
 

package/dist/components/page/Media.svelte

@@ -43,8 +43,11 @@ $: unused = images?.filter((image) => !embeds.some((embed) => image.url.includes
         >
             <Outline
                 slot="outline"
-                previous={$edition.getPreviousChapterID(ChapterIDs.MediaID)}
-                next={$edition.getNextChapterID(ChapterIDs.MediaID)}
+                previous={$edition.getPreviousChapterID(
+                    ChapterIDs.MediaID,
+                    editable
+                )}
+                next={$edition.getNextChapterID(ChapterIDs.MediaID, editable)}
             />
         </Header>
         <Instructions {editable}>