bookish-press 0.4.45 → 0.4.47

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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,152 @@
+<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/{components → src/lib/components}/editor/Icon.svelte

@@ -1,4 +1,5 @@
-<script>export let icon;
+<script lang="ts">
+    export let icon: string;
 </script>
 
 <span>

package/{components → src/lib/components}/editor/ImageChooser.svelte

@@ -1,22 +1,27 @@
-<script>import { onMount } from 'svelte';
-import { getBook, getCaret } from '../page/Contexts';
-export let select;
-export let selection;
-let editor = getCaret();
-let book = getBook();
-let images = undefined;
-let expanded = false;
-function updateImages(newImages) {
-    images = newImages;
-}
-// Load the latest images in the book, and keep them updated as they change.
-onMount(() => {
-    if ($book === undefined)
-        return;
-    const media = $book.getMedia();
-    media.notify(updateImages);
-    return () => media.stopNotifying(updateImages);
-});
+<script lang="ts">
+    import type { Image } from '$lib/models/book/BookMedia';
+    import { onMount } from 'svelte';
+    import { getBook, getCaret } from '$lib/components/page/Contexts';
+
+    export let select: (image: Image) => void;
+    export let selection: string;
+
+    let editor = getCaret();
+    let book = getBook();
+    let images: Image[] | undefined = undefined;
+    let expanded = false;
+
+    function updateImages(newImages: Image[]) {
+        images = newImages;
+    }
+
+    // Load the latest images in the book, and keep them updated as they change.
+    onMount(() => {
+        if ($book === undefined) return;
+        const media = $book.getMedia();
+        media.notify(updateImages);
+        return () => media.stopNotifying(updateImages);
+    });
 </script>
 
 <div

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

@@ -0,0 +1,16 @@
+<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/{components → src/lib/components}/editor/LabelEditor.svelte

@@ -1,12 +1,17 @@
-<script>import TextEditor from './TextEditor.svelte';
-import { getChapter, getEdition } from '../page/Contexts';
-import { getCaret } from '../page/Contexts';
-export let label;
-let edition = getEdition();
-let chapter = getChapter();
-let caret = getCaret();
-$: ast =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+<script lang="ts">
+    import type LabelNode from '$lib/models/chapter/LabelNode';
+    import TextEditor from './TextEditor.svelte';
+    import { getChapter, getEdition } from '../page/Contexts';
+    import { getCaret } from '$lib/components/page/Contexts';
+
+    export let label: LabelNode;
+
+    let edition = getEdition();
+    let chapter = getChapter();
+    let caret = getCaret();
+
+    $: ast =
+        $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
 </script>
 
 <code>

package/{components → src/lib/components}/editor/LanguageEditor.svelte

@@ -1,8 +1,11 @@
-<script>import Options from '../app/Options.svelte';
-import Note from './Note.svelte';
-export let language;
-export let edit;
-const languages = ['', 'html', 'css', 'javascript', 'python'];
+<script lang="ts">
+    import Options from '../app/Options.svelte';
+    import Note from './Note.svelte';
+
+    export let language: string;
+    export let edit: (newValue: string) => void;
+
+    const languages = ['', 'html', 'css', 'javascript', 'python'];
 </script>
 
 <Options

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

@@ -0,0 +1,110 @@
+<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/{components → src/lib/components}/editor/Permissions.svelte

@@ -1,41 +1,48 @@
-<script>import { createUser, getUserEmails } from '../../models/CRUD';
-import Button from '../app/Button.svelte';
-import TextInput from '../app/TextInput.svelte';
-import Note from './Note.svelte';
-export let uids;
-export let inheriteduids;
-export let writable;
-export let atleastone;
-export let change;
-let emails = null;
-$: alluids = Array.from(new Set([...uids, ...inheriteduids]));
-async function getEmails(userIDs) {
-    emails = await getUserEmails(userIDs);
-}
-$: {
-    if (emails === null ||
-        (emails.size > 0 &&
-            Array.from(emails.keys()).join() !== alluids.join()))
-        getEmails(alluids);
-}
-let newEditor = '';
-let newEditorError = null;
-let loading = undefined;
-async function addEditor() {
-    const email = newEditor;
-    newEditor = '';
-    loading = email;
-    try {
-        const uid = await createUser(email);
-        if (uid === null)
-            newEditorError = "couldn't add editor";
-        else
-            change([...uids, uid]);
+<script lang="ts">
+    import { createUser, getUserEmails } from '../../models/CRUD';
+    import Button from '../app/Button.svelte';
+    import TextInput from '../app/TextInput.svelte';
+    import Note from './Note.svelte';
+
+    export let uids: string[];
+    export let inheriteduids: string[];
+    export let writable: boolean;
+    export let atleastone: boolean;
+    export let change: (uids: string[]) => void;
+
+    let emails: Map<string, string> | null = null;
+
+    $: alluids = Array.from(new Set([...uids, ...inheriteduids]));
+
+    async function getEmails(userIDs: string[]) {
+        emails = await getUserEmails(userIDs);
     }
-    finally {
-        loading = undefined;
+    $: {
+        if (
+            emails === null ||
+            (emails.size > 0 &&
+                Array.from(emails.keys()).join() !== alluids.join())
+        )
+            getEmails(alluids);
+    }
+
+    let newEditor: string = '';
+    let newEditorError: string | null = null;
+
+    let loading: string | undefined = undefined;
+
+    async function addEditor() {
+        const email = newEditor;
+        newEditor = '';
+        loading = email;
+        try {
+            const uid = await createUser(email);
+            if (uid === null) newEditorError = "couldn't add editor";
+            else change([...uids, uid]);
+        } finally {
+            loading = undefined;
+        }
     }
-}
 </script>
 
 {#if emails === null}

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

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,14 @@
+<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/{components → src/lib/components}/editor/Switch.svelte

@@ -1,15 +1,18 @@
-<script>import Icon from './Icon.svelte';
-export let options;
-export let icons = undefined;
-export let value;
-export let enabled = undefined;
-export let edit;
-function handleClick(event) {
-    const newValue = event.currentTarget.dataset.value;
-    if (newValue && options.includes(newValue)) {
-        edit(newValue);
+<script lang="ts">
+    import Icon from './Icon.svelte';
+
+    export let options: string[];
+    export let icons: Record<string, string> | undefined = undefined;
+    export let value: string;
+    export let enabled: boolean | undefined = undefined;
+    export let edit: (newValue: string) => void;
+
+    function handleClick(event: MouseEvent) {
+        const newValue = (event.currentTarget as HTMLElement).dataset.value;
+        if (newValue && options.includes(newValue)) {
+            edit(newValue);
+        }
     }
-}
 </script>
 
 <span class="switch">

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

@@ -0,0 +1,14 @@
+<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))}
+/>