bookish-press 0.4.0

package/components/editor/UndoState.d.ts

@@ -0,0 +1,8 @@
+import type { IndexRange } from "../../models/chapter/Caret";
+import type Command from "./Command";
+declare type UndoState = {
+    command: Command | undefined;
+    bookdown: string;
+    range: IndexRange;
+};
+export default UndoState;

package/components/editor/UndoState.js

@@ -0,0 +1 @@
+export {};

package/components/page/Acknowledgements.svelte

@@ -0,0 +1,29 @@
+<script>import Parser from "../../models/chapter/Parser";
+import ChapterBody from "../chapter/ChapterBody.svelte";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import Instructions from "./Instructions.svelte";
+import { getEdition, isEditable } from "./Contexts";
+let edition = getEdition();
+let editable = isEditable();
+$: acknowledgements = $edition.getAcknowledgements();
+$: acksNode = Parser.parseChapter($edition, acknowledgements);
+</script>
+
+<Instructions>
+    This section is not shown if empty.
+    But surely you have someone to thank!
+</Instructions>
+
+ <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
+{#if editable }
+    <BookishEditor
+        ast={acksNode} 
+        chapter={false}
+        component={ChapterBody}
+        placeholder="Who would you like to thank?"
+        save={node => $edition.setAcknowledgements(node.toBookdown())}
+    />
+{:else if acknowledgements.length > 0 }
+    <h2 class="bookish-header" id="acknowledgements">Acknowledgements</h2>
+    <ChapterBody node={acksNode}/>
+{/if}

package/components/page/Acknowledgements.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AcknowledgementsProps = typeof __propDef.props;
+export declare type AcknowledgementsEvents = typeof __propDef.events;
+export declare type AcknowledgementsSlots = typeof __propDef.slots;
+export default class Acknowledgements extends SvelteComponentTyped<AcknowledgementsProps, AcknowledgementsEvents, AcknowledgementsSlots> {
+}
+export {};

package/components/page/Alert.svelte

@@ -0,0 +1,11 @@
+<section><slot></slot></section>
+
+<style>
+    section {
+        margin-top: 1em;
+        margin-bottom: 1em;
+        background-color: var(--bookish-app-error-background);
+        color: var(--bookish-app-error-color);
+        padding: var(--bookish-app-chrome-padding);
+    }
+</style>

package/components/page/Alert.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  AlertProps */
+/** @typedef {typeof __propDef.events}  AlertEvents */
+/** @typedef {typeof __propDef.slots}  AlertSlots */
+export default class Alert extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/page/Authors.svelte

@@ -0,0 +1,62 @@
+<script>import Parser from '../../models/chapter/Parser';
+import TextEditor from '../editor/TextEditor.svelte';
+import Format from '../chapter/Format.svelte';
+import { afterUpdate } from 'svelte';
+import { getEdition, isEditable } from './Contexts';
+import Note from '../editor/Note.svelte';
+export let authors;
+export let inheritedAuthors = undefined;
+export let add;
+export let edit;
+export let remove;
+let editable = isEditable();
+let edition = getEdition();
+let authorList = null;
+let newAuthor = false;
+function addAuthor() {
+    add();
+    newAuthor = true;
+}
+// When there's a new author, focus on it.
+afterUpdate(() => {
+    if (authors.length > 0 && authorList && newAuthor) {
+        const editors = authorList.querySelectorAll("input");
+        if (editors.length > 0) {
+            const lastAuthor = editors[editors.length - 1];
+            if (lastAuthor instanceof HTMLElement) {
+                lastAuthor.focus();
+            }
+        }
+        newAuthor = false;
+    }
+});
+</script>
+
+<div class="bookish-authors" bind:this={authorList}>
+    {#if authors.length === 0 }
+        {#if editable && inheritedAuthors !== undefined && inheritedAuthors.length > 0 }
+            <Note>&nbsp;(book authors)&nbsp;</Note>
+        {:else}
+            No authors
+        {/if}
+    {:else}
+        <em>by </em>
+        {#each authors as author, index }
+            {#if editable }
+                <TextEditor
+                    startText={author} 
+                    label={'Author name editor'} 
+                    placeholder="Author"
+                    valid={ () => undefined }
+                    save={ text => /* If text is already empty, remove */ author.length > 0 && text === "" ? remove(index) : edit(index, text) }
+                />
+            {:else}
+                <span><Format node={Parser.parseFormat($edition, author)} /></span>
+            {/if}
+            {#if index < authors.length - 1},&nbsp{/if}
+        {/each}
+    {/if}
+    {#if editable }
+        &nbsp;<button on:click={addAuthor}>+</button>
+    {/if}
+</div>

package/components/page/Authors.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        authors: string[];
+        inheritedAuthors?: string[] | undefined;
+        add: () => Promise<void>;
+        edit: (index: number, text: string) => Promise<void> | undefined;
+        remove: (index: number) => Promise<void> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AuthorsProps = typeof __propDef.props;
+export declare type AuthorsEvents = typeof __propDef.events;
+export declare type AuthorsSlots = typeof __propDef.slots;
+export default class Authors extends SvelteComponentTyped<AuthorsProps, AuthorsEvents, AuthorsSlots> {
+}
+export {};

package/components/page/BulkReferenceEditor.svelte

@@ -0,0 +1,32 @@
+<script>import Instructions from "./Instructions.svelte";
+import { getUniqueReferenceID, mineReference } from "../../util/mineReference";
+import ReferenceNode from "../../models/chapter/ReferenceNode";
+import { getEdition } from "./Contexts";
+let edition = getEdition();
+let text = "";
+function handleBulkAdd() {
+    // Split by lines, skipping empty lines.
+    const references = text.split(/\n+/).map(line => mineReference(Object.keys($edition.getReferences()), line));
+    $edition.addReferences(references)
+        .catch(() => {
+        alert("Failed to save references.");
+    });
+}
+function handleEmptyAdd() {
+    $edition.addReferences([new ReferenceNode(getUniqueReferenceID(Object.keys($edition.getReferences())))])
+        .catch(() => {
+        alert("Failed to save empty reference.");
+    });
+}
+</script>
+
+<Instructions>
+    To cite references in a chapter, add them here.
+    You can add one at a time, or try pasting them in bulk, and we'll do our best to pull out the relevant parts, looking for things that look like author lists, years, sources, and URLs.
+    Be sure to verify it though &mdash; it's likely to get some things wrong!
+</Instructions>
+<div>
+    <textarea rows={5} bind:value={text} style="width: 100%"></textarea>
+    <button disabled={text.length === 0} on:click={handleBulkAdd}>Add bulk references</button>
+    <button on:click={handleEmptyAdd}>Add empty reference</button>
+</div>

package/components/page/BulkReferenceEditor.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BulkReferenceEditorProps = typeof __propDef.props;
+export declare type BulkReferenceEditorEvents = typeof __propDef.events;
+export declare type BulkReferenceEditorSlots = typeof __propDef.slots;
+export default class BulkReferenceEditor extends SvelteComponentTyped<BulkReferenceEditorProps, BulkReferenceEditorEvents, BulkReferenceEditorSlots> {
+}
+export {};

package/components/page/Chapter.svelte

@@ -0,0 +1,301 @@
+<script>import Parser from "../../models/chapter/Parser";
+import Header from './Header.svelte';
+import Authors from "./Authors.svelte";
+import Outline from './Outline.svelte';
+import Page from './Page.svelte';
+import TextEditor from '../editor/TextEditor.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Toggle from '../editor/Toggle.svelte';
+import Instructions from './Instructions.svelte';
+import ChapterBody from '../chapter/ChapterBody.svelte';
+import PossibleReference from "./PossibleReference.svelte";
+import { CHAPTER, getEdition, isEditable } from "./Contexts";
+import { writable } from "svelte/store";
+import { onMount, setContext } from "svelte";
+import { hideOutlineIfObscured, layoutMarginals } from "./margins";
+import scrollToEyeLevel from "../../util/scrollToEyeLevel";
+import { goto } from "$app/navigation";
+import ChapterNode from "../../models/chapter/ChapterNode";
+export let chapter;
+export let print = false;
+let edition = getEdition();
+let editable = isEditable();
+// Keep track of the scroll position to facilitate reading during reloads.
+function rememberPosition() { localStorage.setItem('scrollposition', "" + window.scrollY); }
+// When the window resizes, the responsive layout might cause the marginals to move to the footer.
+// when this happens, we want to immediately remove all of the explicit positioning.
+function handleResize() { layoutMarginals(); }
+// The currently selected marginal; we only do one at a time.
+let marginal = undefined;
+// Keep track of which hash mark is scrolled to
+let highlightedID = undefined;
+// When this component is mounted...
+// 1) Subscribe and unsubscribe to window listeners
+// 2) Do initial layout of marginals
+// 3) Start observing any elements corresponding to the ID in the URL's hash string
+// 4) Clean up our mess after unmounting.
+onMount(() => {
+    // On render or when scrolling, see if the URL hash has changed and update state accordingly.
+    // We also track whether we've scrolled to it.
+    const observeHash = () => {
+        // Get the ID without the hash and the corresponding element
+        const elementID = window.location.hash.substring(1);
+        const element = elementID ? document.getElementById(elementID) : null;
+        // If it's not empty, observe it, and remember what we're observing for highlighting
+        if (element) {
+            highlightedID = elementID;
+            // Start watching this a few seconds after we see it, giving the for in-page scrolling.
+            setTimeout(() => observer.observe(element), 2500);
+        }
+    };
+    // Do things to do when scrolling
+    const handleScroll = () => {
+        // See if the outline is obscured by an image
+        hideOutlineIfObscured();
+        // See if there are any new hashes to observe. This is because
+        // we're using react-router-hash-link, which doesn't trigger hashchange events for some reason.
+        observeHash();
+    };
+    // Lay things out when the window or scroll changes.
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+    // Remember the scroll position before a refresh.
+    // We have to do all of these because browser support varies.
+    window.addEventListener("beforeunload", rememberPosition);
+    window.addEventListener("visibilitychange", rememberPosition);
+    window.addEventListener("pagehide", rememberPosition);
+    // Start listening for hash changes, since we want to remove them upon scrolling away from them.
+    window.addEventListener("pushstate", observeHash);
+    window.addEventListener("popstate", observeHash);
+    window.addEventListener("hashchange", observeHash);
+    // Make an intersection observer to monitor the location of elements selected by the URL hash ID.
+    const observer = new IntersectionObserver((entries => {
+        // Go through all of the monitored elements
+        entries.forEach(entry => {
+            // If the observed element is out of view and in the hash, remove the hash 
+            if (entry.intersectionRatio === 0 && entry.target.id === window.location.hash.substring(1)) {
+                history.pushState("", document.title, window.location.pathname + window.location.search);
+                observer.unobserve(entry.target);
+                highlightedID = undefined;
+            }
+        });
+    }));
+    // Do an initial check the hash to see if there's an ID to scroll to
+    observeHash();
+    // Position the marginals, since there's new content.
+    layoutMarginals();
+    // Periodically save the chapter's edits.
+    const chapterSaverID = setInterval(() => {
+        $currentChapter.saveEdits();
+    }, 500);
+    // On cleanup, unsubscribe from everything above.
+    return () => {
+        window.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('resize', handleResize);
+        // Stop listening to page visibility changes.
+        window.removeEventListener("beforeunload", rememberPosition);
+        window.removeEventListener("visibilitychange", rememberPosition);
+        window.removeEventListener("pagehide", rememberPosition);
+        // Delete the remembered position so that the next page scrolls to top.
+        localStorage.removeItem("scrollposition");
+        // Stop listening for hash changes
+        window.removeEventListener("pushstate", observeHash);
+        window.removeEventListener("popstate", observeHash);
+        window.removeEventListener("hashchange", observeHash);
+        // Stop observing everything on unmount
+        observer.disconnect();
+        // Stop saving.
+        clearInterval(chapterSaverID);
+    };
+});
+// Position the marginals on mount.
+onMount(() => layoutMarginals());
+// Keep track of the current chapter in a store to manage listeners on the chapter.
+let currentChapter = writable(chapter);
+let chapterChanged = () => currentChapter.set(chapter);
+$: {
+    // Listen to the new edition
+    $currentChapter.removeListener(chapterChanged);
+    // Update the current edition.
+    currentChapter.set(chapter);
+    // Listen to changes on the book and chapter.
+    $currentChapter.addListener(chapterChanged);
+}
+// This gets called after the page is done loading. There are various things we scroll to.
+function scrollToLastLocation() {
+    // In case loading changed marginal positions
+    layoutMarginals();
+    // If there's a word we're trying to highlight in the URL path, scroll to the corresponding match.
+    if (location.search) {
+        const highlights = document.getElementsByClassName("bookish-text bookish-content-highlight");
+        const num = getHighlightedNumber();
+        if (num && highlights.length > 0 && num < highlights.length && num >= 0) {
+            scrollToEyeLevel(highlights[num]);
+        }
+    }
+    // Otherwise, if there's an ID in the URL, jump to it.
+    else if (highlightedID) {
+        const el = document.getElementById(highlightedID);
+        // If we found the element, remove the hash any time after a few seconds. See handleScroll for the removal logic.
+        if (el) {
+            scrollToEyeLevel(el);
+        }
+    }
+    else {
+        // If we got to this page through a refresh, scroll to 
+        const entries = performance.getEntriesByType("navigation");
+        const position = localStorage.getItem('scrollposition');
+        if (position !== null && entries.length > 0 && entries[entries.length - 1].type === "reload") {
+            // Scroll to the previous position, if there was one, so that refresh preserves position.
+            window.scrollTo(0, parseInt(position));
+        }
+        // Otherwise, just scroll to the top.
+        else {
+            window.scrollTo(0, 0);
+        }
+    }
+}
+function getHighlightedWord() { return location.search.split("&")[0]?.split("=")[1] ?? undefined; }
+function getHighlightedNumber() {
+    const number = location.search.split("&")[1]?.split("=")[1];
+    return number === undefined ? undefined : parseInt(number);
+}
+// Prepare to render the chapter by getting some data from the chapter and book.
+$: chapterID = $currentChapter.getChapterID();
+$: chapterNumber = $edition.getChapterNumber(chapterID);
+$: chapterSection = $edition.getChapterSection(chapterID);
+$: chapterAST = $currentChapter.getAST();
+$: citations = chapterAST ? chapterAST.getCitations() : undefined;
+let chapterStore = writable();
+setContext(CHAPTER, chapterStore);
+$: chapterStore.set({
+    chapter: chapter,
+    highlightedWord: getHighlightedWord(),
+    highlightedID: highlightedID,
+    marginalID: marginal,
+    setMarginal: (id) => marginal = id,
+    layoutMarginals: layoutMarginals
+});
+</script>
+
+<Page afterLoaded={scrollToLastLocation} title={`${$edition.getTitle()} - ${chapter.getTitle()}`}>
+    <div class="bookish-chapter">
+        <Header 
+            header={chapter.getTitle()}
+            label="Chapter title"
+            tags={$edition.getTags()}
+            save={ text => chapter.setTitle(text) }
+            getImage={() => chapter.getImage()}
+            setImage={embed => chapter.setImage(embed)}
+            print={print}
+        >
+            <!-- Collapse the outline if a marginal is selected. -->
+            <Outline
+                slot="outline"
+                collapse={marginal !== undefined}
+                previous={$edition.getPreviousChapterID(chapterID)}
+                next={$edition.getNextChapterID(chapterID)}
+                listener={ expanded => {
+                    // If the outline is being expanded, hide the marginal, otherwise leave it alone.
+                    if(expanded)
+                        marginal = undefined;
+
+                    // Check if we need to hide the outline after positioning.
+                    hideOutlineIfObscured();
+                }}
+            />
+            <!-- Add an editable chapter ID if in editor mode -->
+            <svelte:fragment slot="before">
+                {#if editable }
+                    <span class="bookish-muted">
+                        <TextEditor 
+                            startText={chapter.getChapterID()} 
+                            label="Chapter URL ID editor"
+                            save={ 
+                                // After the ID is edited, reload the page with the new URL.
+                                id => chapter.setChapterID(id)?.then(() => {
+                                    const ref = $edition.getRef();
+                                    if(ref?.id)
+                                        goto(`/write/${ref?.id}/chapter/${id}`)
+                                })
+                            }
+                            placeholder="chapter ID"
+                            valid={(newChapterID) => 
+                                !/^[a-zA-Z0-9]+$/.test(newChapterID) ? "Chapter IDs must be one or more letters or numbers" :
+                                chapter.getChapterID() !== newChapterID && $edition.hasChapter(newChapterID) ? "There's already a chapter that has this ID." :
+                                undefined
+                            }
+                            saveOnExit={true}
+                        />
+                        <br/>
+                    </span>
+                {/if}
+                {#if editable }
+                    <Toggle on={chapter.isNumbered()} save={ on => chapter.setNumbered(on) }>
+                        {#if chapterNumber !== undefined }
+                            <span class="bookish-chapter-number">Chapter {chapterNumber}</span>
+                        {:else}
+                            <span class="bookish-muted">Unnumbered</span>
+                        {/if}
+                    </Toggle>
+                {:else if chapterNumber !== undefined }
+                    <span class="bookish-chapter-number">Chapter {chapterNumber}</span> 
+                {/if}
+                {#if chapterSection !== undefined }
+                    <span class="bookish-section-name">&nbsp;&nbsp;{chapterSection}</span>
+                {/if}
+            </svelte:fragment>						
+            <!-- If there are chapter authors, render those, otherwise use the book authors -->
+            <Authors 
+                slot="after"
+                authors={ chapter.getAuthors() }
+                inheritedAuthors={ $edition.getAuthors() }
+                add={ () => chapter.addAuthor("") }
+                edit={(index, text) => chapter.setAuthor(index, text) }
+                remove={index => chapter.removeAuthor(index)}
+            />
+        </Header>
+        <!-- We load this on the page but hide it; it's used as a filter for highlighing in CSS -->
+        <img src={"/svg/marker.svg"} alt="highlight mark" style="display: none"/>
+        <Instructions>
+            Edit your chapter's title, authors, and cover image above.
+            You can also change the ID of the chapter, which appears in it's URL.
+            Write your chapter text below, using the many formatting options in the toolbar above to format text, add headers, lists, tables, comments, citations, footnotes, and more.
+            It's okay to try things, you can always undo!
+            Saves are automatic, each time you stop typing.
+        </Instructions>
+
+        <!-- Render the chapter body, passing some context -->
+        {#if chapterAST }
+            {#if editable }
+                <BookishEditor
+                    ast={chapterAST}
+                    save={ node => node instanceof ChapterNode ? chapter.setAST(node) : undefined }
+                    chapter={true}
+                    autofocus
+                    component={ChapterBody}
+                    placeholder="Type here"
+                /> 
+            {:else}
+                <ChapterBody node={chapterAST} />
+            {/if}
+        {:else}
+            <span>Loading...</span>
+        {/if}
+        {#if citations && citations.size > 0 }
+            {@const refs = $edition.getReferences() }
+            <h1 id="references" class="bookish-header">References</h1>
+            <ol>
+                {#each [...citations].sort() as citationID }
+                    {#if citationID in refs }
+                        <li class={"bookish-reference"} id={"ref-" + citationID}>
+                            <PossibleReference node={Parser.parseReference(citationID, refs[citationID], $edition)}/>
+                        </li>
+                    {:else}
+                        <li class="bookish-error">Unknown reference: <code>{citationID}</code></li>
+                    {/if}
+                {/each}
+            </ol>
+        {/if}
+    </div>
+</Page>

package/components/page/Chapter.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type ChapterModel from '../../models/book/Chapter';
+declare const __propDef: {
+    props: {
+        chapter: ChapterModel;
+        print?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChapterProps = typeof __propDef.props;
+export declare type ChapterEvents = typeof __propDef.events;
+export declare type ChapterSlots = typeof __propDef.slots;
+export default class Chapter extends SvelteComponentTyped<ChapterProps, ChapterEvents, ChapterSlots> {
+}
+export {};

package/components/page/ChapterContext.d.ts

@@ -0,0 +1,10 @@
+import type Chapter from "../../models/book/Chapter";
+declare type ChapterContext = {
+    chapter: Chapter;
+    highlightedWord?: string;
+    highlightedID?: string;
+    marginalID?: string;
+    setMarginal: (id: string | undefined) => void;
+    layoutMarginals: () => void;
+} | undefined;
+export default ChapterContext;

package/components/page/ChapterContext.js

@@ -0,0 +1 @@
+export {};

package/components/page/Contexts.d.ts

@@ -0,0 +1,27 @@
+import type { Writable } from "svelte/store";
+import type Book from "../../models/book/Book";
+import type Edition from "../../models/book/Edition";
+import type Authentication from "../Authentication";
+import type CaretContext from "../editor/CaretContext";
+import type ChapterContext from "./ChapterContext";
+export declare type AuthContext = Writable<Authentication>;
+export declare const AUTH: unique symbol;
+export declare function getAuth(): AuthContext;
+export declare type EditionStore = Writable<Edition>;
+export declare const EDITION: unique symbol;
+export declare function getEdition(): EditionStore;
+export declare type CaretStore = Writable<CaretContext>;
+export declare const CARET: unique symbol;
+export declare function getCaret(): CaretStore;
+export declare type DarkModeStore = Writable<boolean>;
+export declare const DARK_MODE: unique symbol;
+export declare function getDarkMode(): DarkModeStore;
+export declare type ChapterStore = Writable<ChapterContext>;
+export declare const CHAPTER: unique symbol;
+export declare function getChapter(): ChapterStore;
+export declare const EDITABLE: unique symbol;
+export declare function isEditable(): unknown;
+export declare const BASE: unique symbol;
+export declare function getBase(): string;
+export declare const BOOK: unique symbol;
+export declare function getBook(): Book;

package/components/page/Contexts.js

@@ -0,0 +1,21 @@
+// We use these unique objects as keys in Svelte context in order
+// to avoid key collisions and prevent typos. This is partly
+// future-proofing, but also because getContext<Type>() isn't type safe,
+// as the resulting value is coerced to Type even if it's not that value.
+import { getContext } from "svelte";
+export const AUTH = Symbol("auth");
+export function getAuth() { return getContext(AUTH); }
+export const EDITION = Symbol("edition");
+export function getEdition() { return getContext(EDITION); }
+export const CARET = Symbol("caret");
+export function getCaret() { return getContext(CARET); }
+export const DARK_MODE = Symbol("dark");
+export function getDarkMode() { return getContext(DARK_MODE); }
+export const CHAPTER = Symbol("chapter");
+export function getChapter() { return getContext(CHAPTER); }
+export const EDITABLE = Symbol("editable");
+export function isEditable() { return getContext(EDITABLE); }
+export const BASE = Symbol("base");
+export function getBase() { return getContext(BASE); }
+export const BOOK = Symbol("book");
+export function getBook() { return getContext(BOOK); }