bookish-press 0.4.47 → 0.4.48

package/src/lib/components/editor/Toolbar.svelte

@@ -1,297 +0,0 @@
-<script lang="ts">
-    import commands from './Commands';
-    import type Command from './Command';
-
-    import TextNode from '$lib/models/chapter/TextNode';
-    import AtomNode from '$lib/models/chapter/AtomNode';
-
-    import LinkNode from '$lib/models/chapter/LinkNode';
-    import LabelNode from '$lib/models/chapter/LabelNode';
-    import InlineCodeNode from '$lib/models/chapter/InlineCodeNode';
-    import CitationsNode from '$lib/models/chapter/CitationsNode';
-    import DefinitionNode from '$lib/models/chapter/DefinitionNode';
-    import CodeNode from '$lib/models/chapter/CodeNode';
-    import CalloutNode from '$lib/models/chapter/CalloutNode';
-    import EmbedNode from '$lib/models/chapter/EmbedNode';
-    import QuoteNode from '$lib/models/chapter/QuoteNode';
-    import type MetadataNode from '$lib/models/chapter/MetadataNode';
-
-    import LabelEditor from '$lib/components/editor/LabelEditor.svelte';
-    import InlineCodeEditor from '$lib/components/editor/InlineCodeEditor.svelte';
-    import CitationsEditor from '$lib/components/editor/CitationsEditor.svelte';
-    import LinkEditor from '$lib/components/editor/LinkEditor.svelte';
-    import DefinitionEditor from '$lib/components/editor/DefinitionEditor.svelte';
-    import CaptionedCodeEditor from '$lib/components/editor/CaptionedCodeEditor.svelte';
-    import CalloutEditor from '$lib/components/editor/CalloutEditor.svelte';
-    import QuoteEditor from '$lib/components/editor/QuoteEditor.svelte';
-    import EmbedEditor from '$lib/components/editor/EmbedEditor.svelte';
-    import TableEditor from '$lib/components/editor/TableEditor.svelte';
-    import ToolbarGroup from './ToolbarGroup.svelte';
-    import Icon from './Icon.svelte';
-    import Button from '../app/Button.svelte';
-
-    import AnnotateIcon from './icons/annotate.svg?raw';
-    import BlockIcon from './icons/block.svg?raw';
-    import ClipboardIcon from './icons/clipboard.svg?raw';
-    import LevelIcon from './icons/level.svg?raw';
-    import ListIcon from './icons/list.svg?raw';
-    import TextIcon from './icons/text.svg?raw';
-    import TimeIcon from './icons/time.svg?raw';
-    import TableIcon from './icons/table.svg?raw';
-    import LinkIcon from './icons/link.svg?raw';
-
-    import LabelIcon from './icons/label.svg?raw';
-    import CitationIcon from './icons/citation.svg?raw';
-    import DefineIcon from './icons/define.svg?raw';
-    import CodeIcon from './icons/code.svg?raw';
-    import CalloutIcon from './icons/callout.svg?raw';
-    import QuoteIcon from './icons/quote.svg?raw';
-    import MediaIcon from './icons/media.svg?raw';
-    import TableNode from '../../models/chapter/TableNode';
-    import { slide } from 'svelte/transition';
-    import type CaretState from './CaretState';
-
-    const keyLabels: { [key: string]: string } = {
-        Digit0: '0',
-        Digit1: '1',
-        Digit2: '2',
-        Digit3: '3',
-        ArrowDown: '↓',
-        ArrowUp: '↑',
-        ArrowLeft: '←',
-        ArrowRight: '→',
-        Backspace: '\u232B',
-    };
-
-    const categoryOrder: { [key: string]: number } = {
-        navigation: 1,
-        selection: 2,
-        text: 3,
-        clipboard: 4,
-        annotation: 5,
-        paragraph: 6,
-        level: 7,
-        list: 8,
-        table: 9,
-        block: 10,
-    };
-
-    const categoryIcons: { [key: string]: string } = {
-        text: TextIcon,
-        clipboard: ClipboardIcon,
-        annotation: AnnotateIcon,
-        level: LevelIcon,
-        block: BlockIcon,
-        list: ListIcon,
-        table: TableIcon,
-        history: TimeIcon,
-    };
-
-    export let caret: CaretState;
-
-    $: context = caret.context;
-    $: chapter = context?.root;
-
-    let element: HTMLElement | null = null;
-    let categories: string[] | undefined = undefined;
-    let commandsByCategory: { [key: string]: Command[] } = {};
-    let metaNode: MetadataNode<any> | AtomNode<any> | undefined = undefined;
-    let calloutNode: CalloutNode | undefined = undefined;
-    let quoteNode: QuoteNode | undefined = undefined;
-    let embedNode: EmbedNode | undefined = undefined;
-    let tableNode: TableNode | undefined = undefined;
-
-    function getShortcutDescription(command: Command) {
-        const macOS = navigator.userAgent.indexOf('Mac') >= 0;
-        const controlSymbol = macOS ? '\u2318' : 'Ctrl+';
-        const altSymbol = macOS ? '\u2325' : 'Alt+';
-        const key = command.key
-            ? Array.isArray(command.key)
-                ? command.key.join('/')
-                : command.key
-            : command.code
-            ? command.code
-            : 'any';
-        const keyLabel = (
-            typeof key === 'string'
-                ? key in keyLabels
-                    ? keyLabels[key]
-                    : key
-                : '—'
-        ).toLocaleUpperCase();
-        return `${command.control ? controlSymbol : ''}${
-            command.alt ? altSymbol : ''
-        }${command.shift ? '\u21E7' : ''}${keyLabel}`;
-    }
-
-    // Update the above when the dependencies below change.
-    $: {
-        if (context !== undefined && chapter) {
-            // Filter the commands by those interactive with a mouse and active.
-            const visible = commands.filter(
-                (command) =>
-                    command.visible === true ||
-                    (context &&
-                        command.visible instanceof Function &&
-                        command.visible(context))
-            );
-
-            // Extract the active categories and sort them
-            categories = Array.from(
-                new Set(commands.map((command) => command.category))
-            ).sort((a, b) =>
-                a in categoryOrder && b in categoryOrder
-                    ? categoryOrder[a] - categoryOrder[b]
-                    : 0
-            );
-
-            // Make a list for each category of commands
-            commandsByCategory = {};
-            categories.forEach((cat) => {
-                if (commandsByCategory)
-                    commandsByCategory[cat] = visible.filter(
-                        (command) => command.category === cat
-                    );
-            });
-
-            const caretNode = context.start.node;
-
-            metaNode =
-                caretNode instanceof AtomNode
-                    ? caretNode
-                    : caretNode instanceof TextNode
-                    ? (caretNode.getParent(chapter) as MetadataNode<any>)
-                    : undefined;
-
-            calloutNode = caretNode.getClosestParentMatching(
-                chapter,
-                (p) => p instanceof CalloutNode
-            ) as CalloutNode;
-            quoteNode = caretNode.getClosestParentMatching(
-                chapter,
-                (p) => p instanceof QuoteNode
-            ) as QuoteNode;
-            embedNode =
-                caretNode instanceof EmbedNode
-                    ? caretNode
-                    : (caretNode.getClosestParentMatching(
-                          chapter,
-                          (p) => p instanceof EmbedNode
-                      ) as EmbedNode);
-            tableNode = caretNode.getClosestParentMatching(
-                chapter,
-                (p) => p instanceof TableNode
-            ) as TableNode;
-        }
-    }
-
-    function handleKeyPress(event: KeyboardEvent) {
-        // Return focus to the editor if someone presses an unhandled enter
-        if ((event.key === 'Escape' || event.key === 'Enter') && element) {
-            const editor = element.closest('.bookish-editor');
-            if (editor instanceof HTMLElement) {
-                event.stopPropagation();
-                editor.focus();
-            }
-            return true;
-        }
-    }
-</script>
-
-{#if chapter}
-    <section
-        class="bookish-editor-toolbar"
-        bind:this={element}
-        on:keypress={handleKeyPress}
-        on:keydown={handleKeyPress}
-        on:mousedown|stopPropagation={() => element?.focus()}
-        tabIndex="0"
-        transition:slide={{ duration: 200 }}
-    >
-        {#if context && categories}
-            {#each categories as cat}
-                {#if commandsByCategory[cat].length > 0}
-                    <ToolbarGroup
-                        icon={cat in categoryIcons
-                            ? categoryIcons[cat]
-                            : cat.charAt(0).toUpperCase() + cat.slice(1)}
-                    >
-                        {#each commandsByCategory[cat] as command}
-                            <Button
-                                disabled={command.active === false ||
-                                    (command.active instanceof Function &&
-                                        command.active.call(
-                                            undefined,
-                                            context
-                                        ) === false)}
-                                tooltip={command.description +
-                                    ' ' +
-                                    getShortcutDescription(command)}
-                                tabIndex="0"
-                                command={() =>
-                                    caret?.executor.call(
-                                        undefined,
-                                        command,
-                                        ''
-                                    )}
-                            >
-                                <Icon icon={command.icon} />
-                            </Button>
-                        {/each}
-                        {#if cat === 'table' && tableNode}
-                            <TableEditor table={tableNode} />
-                        {/if}
-                    </ToolbarGroup>
-                {/if}
-            {/each}
-        {/if}
-        {#if metaNode instanceof LinkNode}<ToolbarGroup icon={LinkIcon}
-                ><LinkEditor link={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof LabelNode}<ToolbarGroup icon={LabelIcon}
-                ><LabelEditor label={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof InlineCodeNode}<ToolbarGroup
-                icon={CodeIcon}
-                ><InlineCodeEditor code={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof CitationsNode}<ToolbarGroup
-                icon={CitationIcon}
-                ><CitationsEditor citations={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof DefinitionNode}<ToolbarGroup
-                icon={DefineIcon}
-                ><DefinitionEditor definition={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof CodeNode && context}<ToolbarGroup
-                icon={CodeIcon}
-                ><CaptionedCodeEditor code={metaNode} /></ToolbarGroup
-            >
-        {:else if calloutNode}<ToolbarGroup icon={CalloutIcon}
-                ><CalloutEditor callout={calloutNode} /></ToolbarGroup
-            >
-        {:else if quoteNode}<ToolbarGroup icon={QuoteIcon}
-                ><QuoteEditor quote={quoteNode} /></ToolbarGroup
-            >
-        {:else if embedNode}<ToolbarGroup icon={MediaIcon}
-                ><EmbedEditor embed={embedNode} /></ToolbarGroup
-            >
-        {/if}
-    </section>
-{/if}
-
-<style>
-    .bookish-editor-toolbar {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: baseline;
-        background: var(--bookish-background-color);
-        font-family: var(--app-font);
-        font-size: var(--app-chrome-font-size);
-    }
-
-    .bookish-editor-toolbar:focus {
-        outline: 2px solid var(--app-interactive-color);
-    }
-</style>

package/src/lib/components/editor/URLEditor.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-    import TextEditor from './TextEditor.svelte';
-
-    export let url: string;
-    export let validator: (text: string) => undefined | string;
-    export let edit: (newURL: string) => string | undefined;
-</script>
-
-<TextEditor
-    placeholder="url"
-    text={url}
-    label="URL editor"
-    valid={(url) => validator(url)}
-    save={(url) => edit(url)}
-/>

package/src/lib/components/page/Authors.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-    import Parser from '$lib/models/chapter/Parser';
-    import TextEditor from '$lib/components/editor/TextEditor.svelte';
-    import Format from '$lib/components/chapter/Format.svelte';
-    import { afterUpdate } from 'svelte';
-    import { getEdition, isBookEditable, isEditionEditable } from './Contexts';
-    import Note from '../editor/Note.svelte';
-    import Button from '../app/Button.svelte';
-
-    export let editable: boolean;
-    export let authors: string[];
-    export let inheritedAuthors: string[] | undefined = undefined;
-    export let add: () => Promise<void> | void;
-    export let edit: (index: number, text: string) => Promise<void> | void;
-    export let remove: (index: number) => Promise<void> | void;
-
-    let edition = getEdition();
-
-    let authorList: HTMLDivElement | null = null;
-    let newAuthor = false;
-
-    $: authorsToShow =
-        authors.length > 0
-            ? authors
-            : inheritedAuthors !== undefined && inheritedAuthors.length > 0
-            ? inheritedAuthors
-            : undefined;
-
-    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>
-
-<p class="bookish-authors" bind:this={authorList}>
-    <!-- Editing and inherited authors? Say they're  -->
-    {#if authorsToShow === undefined}
-        No authors
-    {:else}
-        <em>by </em>
-        {#each authorsToShow as author, index}
-            {#if editable}
-                <TextEditor
-                    text={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}
-        <Note>(edition authors)&nbsp;</Note>
-    {/if}
-    {#if editable}
-        &nbsp;<Button tooltip="add author" command={addAuthor}>+ author</Button>
-    {/if}
-</p>
-
-<style>
-    .bookish-authors {
-        font-family: var(--bookish-header-font-family);
-        font-style: italic;
-        margin: 0;
-    }
-</style>

package/src/lib/components/page/BookLoader.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-    import Loading from '$lib/components/page/Loading.svelte';
-    import Feedback from '$lib/components/app/Feedback.svelte';
-    import { onDestroy } from 'svelte';
-    import { page } from '$app/stores';
-    import type Book from '$lib/models/book/Book';
-    import { getBook, getUser } from '$lib/components/page/Contexts';
-    import {
-        listenToBookWithID as listenToBooksWithID,
-        listenToBooksByName as listenToBooksWithName,
-    } from '$lib/models/CRUD';
-    import type { Unsubscribe } from 'firebase/auth';
-
-    let auth = getUser();
-    let book = getBook();
-
-    // Keep track of the query updates
-    let booksByName: Book[] | undefined = undefined;
-    let bookByID: Book | null | undefined = undefined;
-
-    // Mege them together here
-    $: currentBook =
-        // Neither loaded? Current book isn't loaded.
-        booksByName === undefined && bookByID === undefined
-            ? undefined
-            : booksByName !== undefined && booksByName.length > 0
-            ? booksByName[0]
-            : bookByID ?? null;
-
-    // Whenever the merge changes, update the book store (updating the whole UI)
-    $: book.set(currentBook ?? undefined);
-
-    // Keep track of listeners to unsubscribe to on page changes.
-    let nameUnsub: Unsubscribe | undefined = undefined;
-    let idUnsub: Unsubscribe | undefined = undefined;
-
-    function unsub() {
-        if (nameUnsub) nameUnsub();
-        if (idUnsub) idUnsub();
-    }
-
-    // Keep track of any errors.
-    let error: string | undefined;
-
-    function listen() {
-        unsub();
-        try {
-            nameUnsub = listenToBooksWithName(
-                $page.params.bookid,
-                (books) => (booksByName = books)
-            );
-            idUnsub = listenToBooksWithID(
-                $page.params.bookid,
-                (book) => (bookByID = book)
-            );
-        } catch (err) {
-            error = '' + err;
-        }
-    }
-
-    // When page or auth changes and there's a user, update the listener.
-    $: if ($page && $auth && $auth.user !== null) listen();
-
-    // When this is unmounted, unset them.
-    onDestroy(() => {
-        book.set(undefined);
-        unsub();
-    });
-</script>
-
-{#if error || currentBook === null}
-    <Feedback error>Unable to load book.</Feedback>
-{:else if currentBook === undefined}
-    <Loading />
-{:else}
-    <slot />
-{/if}

package/src/lib/components/page/BulkReferenceEditor.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-    import Instructions from './Instructions.svelte';
-    import {
-        getUniqueReferenceID,
-        mineReference,
-    } from '$lib/util/mineReference';
-    import Reference from '$lib/models/book/Reference';
-    import {
-        getEdition,
-        isEditionEditable,
-        isEditionPartiallyEditable,
-    } from './Contexts';
-    import Button from '../app/Button.svelte';
-
-    let edition = getEdition();
-    let text = '';
-    let editable = isEditionEditable() || isEditionPartiallyEditable();
-
-    function handleBulkAdd() {
-        // Split by lines, skipping empty lines.
-        const references = text
-            .split(/\n+/)
-            .map((line) =>
-                mineReference(
-                    Object.keys($edition?.getReferences() ?? []),
-                    line
-                )
-            );
-
-        if ($edition) {
-            edition.set($edition.withNewReferences(references));
-            text = '';
-        }
-    }
-
-    function handleEmptyAdd() {
-        if ($edition) {
-            edition.set(
-                $edition.withNewReferences([
-                    new Reference(
-                        getUniqueReferenceID(
-                            Object.keys($edition.getReferences())
-                        )
-                    ),
-                ])
-            );
-        }
-    }
-</script>
-
-<Instructions {editable}>
-    To add references to a chapter, add them here first. You can add one at a
-    time, or try pasting them in bulk, and this page will try to pull out author
-    lists, years, sources, and URLs. Be sure to verify it though &mdash; it's
-    likely to get some things wrong.
-</Instructions>
-
-<textarea rows={5} bind:value={text} style="width: 100%" />
-<Button
-    tooltip="convert to references"
-    disabled={text.length === 0}
-    command={handleBulkAdd}>+ bulk references</Button
->
-<Button tooltip="add empty reference" command={handleEmptyAdd}
-    >+ reference</Button
->
-
-<style>
-    textarea {
-        width: 100%;
-        padding: var(--app-chrome-padding);
-        font-family: var(--app-font);
-        font-size: var(--app-font-size);
-        border: none;
-        border-top: var(--app-chrome-border-size) solid var(--app-border-color);
-        border-bottom: var(--app-chrome-border-size) solid
-            var(--app-border-color);
-        margin-bottom: var(--app-chrome-padding);
-    }
-
-    textarea:focus {
-        border-bottom-color: var(--app-interactive-color);
-        border-top-color: var(--app-interactive-color);
-        outline: none;
-    }
-</style>