bookish-press 0.4.47 → 0.4.48

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

@@ -1,14 +0,0 @@
-<script lang="ts">
-    import type CalloutNode from '$lib/models/chapter/CalloutNode';
-    import PositionEditor from './PositionEditor.svelte';
-    import { getCaret } from '$lib/components/page/Contexts';
-
-    export let callout: CalloutNode;
-
-    let caret = getCaret();
-</script>
-
-<PositionEditor
-    value={callout.getPosition()}
-    edit={(position) => $caret?.edit(callout, callout.withPosition(position))}
-/>

package/src/lib/components/editor/CaretContext.ts

@@ -1,55 +0,0 @@
-import type Caret from '$lib/models/chapter/Caret';
-import type { CaretRange } from '$lib/models/chapter/Caret';
-import type ParagraphNode from '$lib/models/chapter/ParagraphNode';
-import type AtomNode from '$lib/models/chapter/AtomNode';
-import type FormatNode from '$lib/models/chapter/FormatNode';
-import type BlocksNode from '$lib/models/chapter/BlocksNode';
-import type ListNode from '$lib/models/chapter/ListNode';
-import type TableNode from '$lib/models/chapter/TableNode';
-import type MetadataNode from '$lib/models/chapter/MetadataNode';
-import type RootNode from '$lib/models/chapter/RootNode';
-import type Edit from '$lib/models/chapter/Edit';
-import type CodeNode from '$lib/models/chapter/CodeNode';
-import type BlockNode from '$lib/models/chapter/BlockNode';
-import type Clipboard from './Clipboard';
-import type UndoState from './UndoState';
-import type Node from '$lib/models/chapter/Node';
-
-export type PasteContent = { plain: string | undefined };
-
-type CaretContext = {
-    chapter: boolean;
-    range: CaretRange;
-    start: Caret;
-    end: Caret;
-    isSelection: boolean;
-    root: RootNode;
-    blocks: BlocksNode | undefined;
-    paragraph: ParagraphNode | undefined;
-    block: BlockNode | undefined;
-    includesList: boolean;
-    code: CodeNode | undefined;
-    list: ListNode | undefined;
-    table: TableNode | undefined;
-    format: FormatNode | undefined;
-    atom: AtomNode<any> | undefined;
-    meta: MetadataNode<any> | undefined;
-    startIsText: boolean;
-    endIsText: boolean;
-    startIsTextOrAtom: boolean;
-    endIsTextOrAtom: boolean;
-    atParagraphStart: boolean;
-    undoStack: UndoState[];
-    undoPosition: number;
-    undo: () => Edit;
-    redo: () => Edit;
-    clipboard: Clipboard;
-    handleCopy: (node: Node) => void;
-    handlePaste: (
-        context: CaretContext,
-        text: PasteContent | Node,
-        save: boolean
-    ) => Edit;
-};
-
-export default CaretContext;

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

@@ -1,64 +0,0 @@
-<script lang="ts">
-    import type CitationsNode from '$lib/models/chapter/CitationsNode';
-    import Note from './Note.svelte';
-    import Options from '../app/Options.svelte';
-    import Button from '../app/Button.svelte';
-    import { getCaret, getEdition } from '$lib/components/page/Contexts';
-
-    export let citations: CitationsNode;
-
-    let caret = getCaret();
-    let edition = getEdition();
-
-    let value = '';
-
-    function handleSelection(selection: string) {
-        if (selection.length > 0)
-            update(new Set([...citations.getMeta(), selection]));
-    }
-
-    function removeSelection(citationID: string) {
-        let ids = new Set(citations.getMeta());
-        ids.delete(citationID);
-        update(ids);
-    }
-
-    function update(set: Set<string>) {
-        $caret?.edit(citations, citations.withMeta(Array.from(set)));
-    }
-
-    $: uncited =
-        $edition === undefined
-            ? []
-            : Object.keys($edition.getReferences())
-                  .filter(
-                      (citationID) => !citations.getMeta().includes(citationID)
-                  )
-                  .sort();
-    let options: [string, string][] = [];
-    $: {
-        options = [];
-        options.push([
-            uncited.length > 0 ? 'Choose references' : 'No uncited references',
-            '',
-        ]);
-        for (const citationID of uncited)
-            options.push([citationID, citationID]);
-    }
-</script>
-
-<Options
-    {options}
-    bind:value
-    changed={handleSelection}
-    label="choose citations"
-/>
-{#each citations.getMeta() as citationID}
-    {citationID}
-    <Button
-        tooltip="Remove citation"
-        command={() => removeSelection(citationID)}>&times; citation</Button
-    >
-{:else}
-    <Note>&mdash;</Note>
-{/each}

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

@@ -1,51 +0,0 @@
-<script lang="ts">
-    import { onMount } from 'svelte';
-    import Button from '../app/Button.svelte';
-
-    export let commandLabel: string;
-    export let tooltip: string;
-    export let confirmLabel: string;
-    export let command: () => Promise<void> | void;
-
-    let confirming = false;
-    let executing = false;
-    let timeoutID: NodeJS.Timer | undefined = undefined;
-    let isMounted = false;
-
-    onMount(() => {
-        isMounted = true;
-        return () => (isMounted = false);
-    });
-
-    function execute() {
-        if (!confirming && !executing) {
-            confirming = true;
-            timeoutID = setTimeout(() => {
-                if (isMounted) confirming = false;
-            }, 2000);
-        } else if (confirming) {
-            command()?.finally(() => {
-                if (isMounted) {
-                    if (timeoutID) clearTimeout(timeoutID);
-                    confirming = false;
-                    executing = false;
-                }
-            });
-        }
-    }
-</script>
-
-<Button
-    disabled={executing}
-    {tooltip}
-    command={execute}
-    class={confirming ? 'bookish-editor-confirm' : ''}
->
-    {confirming ? confirmLabel : commandLabel}
-</Button>
-
-<style>
-    :global(bookish-editor-confirm) {
-        animation: failure 100ms infinite;
-    }
-</style>

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-    import type DefinitionNode from '$lib/models/chapter/DefinitionNode';
-    import Options from '../app/Options.svelte';
-    import Note from './Note.svelte';
-    import { getCaret, getEdition } from '$lib/components/page/Contexts';
-
-    export let definition: DefinitionNode;
-
-    let caret = getCaret();
-    let edition = getEdition();
-    $: glossary = $edition?.getGlossary();
-
-    function handleChange(glossaryID: string) {
-        $caret?.edit(definition, definition.withMeta(glossaryID));
-    }
-
-    // Sort the glossary entries by phrase
-    $: entries =
-        glossary === undefined
-            ? undefined
-            : Object.entries(glossary)
-                  .map(([key, value]) => {
-                      return { glossaryID: key, phrase: value.phrase };
-                  })
-                  .sort((a, b) =>
-                      a && b ? a.phrase.localeCompare(b.phrase) : 0
-                  );
-</script>
-
-{#if entries !== undefined && glossary !== undefined}
-    {#if entries.length === 0}
-        <Note>No glossary entries to add</Note>
-    {:else}
-        <Options
-            options={entries.map((entry) => [entry.phrase, entry.glossaryID])}
-            value={definition.getMeta()}
-            changed={handleChange}
-            label="choose definition"
-        />
-        {#if !(definition.getMeta() in glossary)}
-            <Note>Choose a glossary entry.</Note>
-        {/if}
-    {/if}
-{/if}

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

@@ -1,152 +0,0 @@
-<script lang="ts">
-    import PositionEditor from './PositionEditor.svelte';
-    import EmbedNode from '$lib/models/chapter/EmbedNode';
-    import TextEditor from './TextEditor.svelte';
-    import { storage } from '$lib/models/Firebase';
-    import type { Image } from '$lib/models/book/BookMedia';
-    import ToolbarSpacer from './ToolbarSpacer.svelte';
-    import ImageChooser from './ImageChooser.svelte';
-    import URLEditor from './URLEditor.svelte';
-    import Note from './Note.svelte';
-    import { getBook, getCaret } from '$lib/components/page/Contexts';
-
-    export let embed: EmbedNode;
-
-    let caret = getCaret();
-    let upload: undefined | number | string = undefined;
-
-    $: description = embed.getDescription();
-    let book = getBook();
-
-    function isValidURL(url: string): string | undefined {
-        // Is it a valid URL?
-        try {
-            let test = new URL(url);
-            if (test.protocol === 'http:' || test.protocol === 'https:') return;
-        } catch (_) {}
-        return "URL doesn't seem valid";
-    }
-
-    function handleImageChange(event: Event) {
-        if ($book === undefined) return;
-        if ($caret === undefined) return;
-
-        const target = event.target as HTMLInputElement;
-        const file = target.files === null ? undefined : target.files[0];
-        const media = $book.getMedia();
-
-        if (file === undefined) return;
-        if (storage === undefined) return;
-        if (media === undefined) return;
-
-        media.upload(
-            file,
-            (progress: number) => (upload = `${progress}% done`),
-            (error: string) => (upload = error),
-            (url: string, thumbnail: string) => {
-                // Upload completed successfully, now we can get the download URL
-                $caret?.edit(
-                    embed,
-                    embed.withURLs(url, thumbnail).withDescription('')
-                );
-                upload = undefined;
-            }
-        );
-    }
-
-    function handleImageSelection(image: Image) {
-        // Toggle the embed
-        $caret?.edit(
-            embed,
-            embed.getURL() === image.url
-                ? embed.withURL('').withDescription('')
-                : embed.withURL(image.url)
-        );
-    }
-</script>
-
-{#if $caret?.root instanceof EmbedNode}
-    <ToolbarSpacer />
-{:else}
-    Position <PositionEditor
-        value={embed.getPosition()}
-        edit={(position) => $caret?.edit(embed, embed.withPosition(position))}
-    />
-{/if}
-<label class="file-upload" tabIndex="0">
-    <input
-        type="file"
-        on:input={handleImageChange}
-        accept=".jpg,.jpeg,.png,.gif,image/jpeg,image/png,image/gif"
-    />
-    Upload
-</label>
-<ToolbarSpacer />
-{#if !embed.isHosted()}
-    <URLEditor
-        url={embed.getURL()}
-        validator={isValidURL}
-        edit={(url) => {
-            const revisedEmbed = embed.withURL(url);
-            const revisedURL = revisedEmbed.getURL();
-            $caret?.edit(embed, revisedEmbed);
-            return revisedURL;
-        }}
-    />
-{:else}
-    <Note>(Hosted)</Note>
-{/if}
-<ToolbarSpacer />
-<TextEditor
-    text={description}
-    label={'Image description'}
-    placeholder={'description'}
-    valid={(alt) =>
-        alt.length === 0 ? 'Image description required' : undefined}
-    save={(alt) => {
-        $caret?.edit(embed, embed.withDescription(alt));
-    }}
-    width={20}
-    clip={true}
-/>
-<ToolbarSpacer />
-{#if upload}
-    {upload}
-{/if}
-<ImageChooser select={handleImageSelection} selection={embed.getURL()} />
-
-<style>
-    .file-upload {
-        background-color: var(--app-chrome-background);
-        padding: var(--app-chrome-padding);
-        border-radius: var(--app-chrome-roundedness);
-        border: none;
-    }
-
-    .file-upload:hover {
-        background-color: var(--app-interactive-color);
-        color: var(--app-font-color-inverted);
-        cursor: pointer;
-    }
-
-    .file-upload input:disabled {
-        opacity: 0.3;
-        cursor: auto;
-    }
-
-    .file-upload {
-        font-family: var(--bookish-app-font);
-        font-size: var(--app-chrome-font-size);
-    }
-
-    .file-upload input[type='file'] {
-        display: none;
-    }
-
-    .file-upload:focus-within {
-        position: relative;
-        z-index: 2;
-        outline: var(--app-chrome-border-size) solid
-            var(--app-interactive-color);
-    }
-</style>

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

@@ -1,16 +0,0 @@
-<script lang="ts">
-    import type InlineCodeNode from '$lib/models/chapter/InlineCodeNode';
-    import LanguageEditor from './LanguageEditor.svelte';
-    import { getCaret } from '$lib/components/page/Contexts';
-
-    export let code: InlineCodeNode;
-
-    let caret = getCaret();
-</script>
-
-<span>
-    <LanguageEditor
-        language={code.getMeta()}
-        edit={(lang) => $caret?.edit(code, code.withMeta(lang))}
-    />
-</span>

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

@@ -1,110 +0,0 @@
-<script lang="ts">
-    import type LinkNode from '$lib/models/chapter/LinkNode';
-    import URLEditor from './URLEditor.svelte';
-    import { getChapter, getEdition } from '../page/Contexts';
-    import Icon from './Icon.svelte';
-    import Button from '../app/Button.svelte';
-    import UnlinkIcon from './icons/unlink.svg?raw';
-    import Options from '../app/Options.svelte';
-    import { getCaret } from '$lib/components/page/Contexts';
-
-    export let link: LinkNode;
-
-    let caret = getCaret();
-    let edition = getEdition();
-
-    let chapter = getChapter();
-
-    $: url = link.getMeta();
-
-    function saveEdit(value: string) {
-        $caret?.edit(link, link.withMeta(value));
-    }
-
-    function isValidURL(url: string) {
-        // Is it a valid URL?
-        try {
-            let test = new URL(url);
-            if (test.protocol === 'http:' || test.protocol === 'https:')
-                return true;
-        } catch (_) {}
-        return false;
-    }
-
-    function validate(urlOrChapter: string): string | undefined {
-        if (urlOrChapter.length === 0) return "link URL can't be empty";
-        if ($edition === undefined) return;
-
-        if (isValidURL(urlOrChapter)) return;
-
-        // If not, is it a valid chapterID?
-        if ($edition.hasChapter(urlOrChapter)) return;
-
-        // If not, is it a valid chapterID:label?
-        const [chapterID, labelID] = urlOrChapter.split(':');
-        if (chapterID === undefined || labelID === undefined) return;
-
-        // The chapter ID is optional; if it's missing, it refers to this chapter.
-        const correspondingChapter =
-            chapterID === '' && $chapter
-                ? $chapter.chapter.getAST($edition)
-                : $edition?.getChapter(chapterID)?.getAST($edition);
-        if (correspondingChapter === undefined)
-            return 'Not a valid URL or chapter.';
-
-        if (!correspondingChapter.hasLabel(labelID))
-            return 'Not a valid chapter label.';
-    }
-
-    let options: [string, string][] = [];
-    $: {
-        options = [];
-        // Add an empty option.
-        options.push(['External link', url.startsWith('http') ? url : '']);
-        // Add an option for each chapter and it's labels.
-        if ($edition) {
-            for (const chap of $edition?.getChapters() ?? []) {
-                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()}`,
-                    ]);
-            }
-        }
-    }
-</script>
-
-<span>
-    <Button
-        tooltip="remove link"
-        command={() => {
-            if ($caret?.context?.format) {
-                const newFormat = $caret.context.format.withSegmentReplaced(
-                    link,
-                    link.getText()
-                );
-                if (newFormat) $caret.edit($caret.context.format, newFormat);
-            }
-        }}
-    >
-        <Icon icon={UnlinkIcon} />
-    </Button>
-    <Options
-        {options}
-        changed={(value) => {
-            saveEdit(value);
-            url = value;
-        }}
-        value={url}
-        label="link type"
-    />
-    <URLEditor
-        {url}
-        validator={validate}
-        edit={(url) => {
-            saveEdit(url);
-            return undefined;
-        }}
-    />
-</span>

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

@@ -1,21 +0,0 @@
-<script lang="ts">
-    import type Position from '$lib/models/chapter/Position';
-    import Switch from './Switch.svelte';
-    import LeftIcon from './icons/left.svg?raw';
-    import MiddleIcon from './icons/middle.svg?raw';
-    import RightIcon from './icons/right.svg?raw';
-
-    export let value: string;
-    export let edit: (newValue: Position) => void;
-
-    function editAsString(newValue: string) {
-        edit(newValue as Position);
-    }
-</script>
-
-<Switch
-    options={['<', '|', '>']}
-    icons={{ '<': LeftIcon, '|': MiddleIcon, '>': RightIcon }}
-    {value}
-    edit={editAsString}
-/>

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

@@ -1,14 +0,0 @@
-<script lang="ts">
-    import type QuoteNode from '$lib/models/chapter/QuoteNode';
-    import { getCaret } from '$lib/components/page/Contexts';
-    import PositionEditor from './PositionEditor.svelte';
-
-    export let quote: QuoteNode;
-
-    let caret = getCaret();
-</script>
-
-<PositionEditor
-    value={quote.getPosition()}
-    edit={(position) => $caret?.edit(quote, quote.withPosition(position))}
-/>

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

@@ -1,14 +0,0 @@
-<script lang="ts">
-    import type TableNode from '$lib/models/chapter/TableNode';
-    import { getCaret } from '$lib/components/page/Contexts';
-    import PositionEditor from './PositionEditor.svelte';
-
-    export let table: TableNode;
-
-    let caret = getCaret();
-</script>
-
-<PositionEditor
-    value={table.getPosition()}
-    edit={(position) => $caret?.edit(table, table.withPosition(position))}
-/>

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

@@ -1,47 +0,0 @@
-<script lang="ts">
-    enum Status {
-        Viewing,
-        Saving,
-        Error,
-    }
-
-    export let on: boolean;
-    export let save: (set: boolean) => Promise<void> | void;
-
-    let saving = Status.Viewing;
-
-    function toggle() {
-        saving = Status.Saving;
-
-        const promise = save(!on);
-
-        if (promise === undefined) {
-            saving = Status.Viewing;
-            return;
-        }
-
-        promise
-            .then(() => (saving = Status.Viewing))
-            .catch(() => (saving = Status.Error));
-    }
-</script>
-
-<div
-    class={`bookish-app-interactive ${
-        saving === Status.Saving ? ' bookish-text-editor-saving' : ''
-    } ${saving === Status.Error ? ' bookish-text-editor-error' : ''}`}
-    tabIndex="0"
-    role="switch"
-    aria-checked={on}
-    on:keydown={(event) =>
-        event.key === 'Enter' || event.key === 'Space' ? toggle() : undefined}
-    on:click={toggle}
->
-    <slot />
-</div>
-
-<style>
-    .bookish-app-interactive {
-        cursor: pointer;
-    }
-</style>