bookish-press 0.4.47 → 0.4.49

package/components/editor/ConfirmButton.svelte

@@ -0,0 +1,49 @@
+<script>import { onMount } from 'svelte';
+import Button from '../app/Button.svelte';
+export let commandLabel;
+export let tooltip;
+export let confirmLabel;
+export let command;
+let confirming = false;
+let executing = false;
+let timeoutID = 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/components/editor/ConfirmButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        commandLabel: string;
+        tooltip: string;
+        confirmLabel: string;
+        command: () => Promise<void> | void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConfirmButtonProps = typeof __propDef.props;
+export type ConfirmButtonEvents = typeof __propDef.events;
+export type ConfirmButtonSlots = typeof __propDef.slots;
+export default class ConfirmButton extends SvelteComponentTyped<ConfirmButtonProps, ConfirmButtonEvents, ConfirmButtonSlots> {
+}
+export {};

package/components/editor/DefinitionEditor.svelte

@@ -0,0 +1,36 @@
+<script>import Options from '../app/Options.svelte';
+import Note from './Note.svelte';
+import { getCaret, getEdition } from '../page/Contexts';
+export let definition;
+let caret = getCaret();
+let edition = getEdition();
+$: glossary = $edition?.getGlossary();
+function handleChange(glossaryID) {
+    $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/components/editor/DefinitionEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type DefinitionNode from '../../models/chapter/DefinitionNode';
+declare const __propDef: {
+    props: {
+        definition: DefinitionNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefinitionEditorProps = typeof __propDef.props;
+export type DefinitionEditorEvents = typeof __propDef.events;
+export type DefinitionEditorSlots = typeof __propDef.slots;
+export default class DefinitionEditor extends SvelteComponentTyped<DefinitionEditorProps, DefinitionEditorEvents, DefinitionEditorSlots> {
+}
+export {};

package/components/editor/EmbedEditor.svelte

@@ -0,0 +1,137 @@
+<script>import PositionEditor from './PositionEditor.svelte';
+import EmbedNode from '../../models/chapter/EmbedNode';
+import TextEditor from './TextEditor.svelte';
+import { storage } from '../../models/Firebase';
+import ToolbarSpacer from './ToolbarSpacer.svelte';
+import ImageChooser from './ImageChooser.svelte';
+import URLEditor from './URLEditor.svelte';
+import Note from './Note.svelte';
+import { getBook, getCaret } from '../page/Contexts';
+export let embed;
+let caret = getCaret();
+let upload = undefined;
+$: description = embed.getDescription();
+let book = getBook();
+function isValidURL(url) {
+    // 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) {
+    if ($book === undefined)
+        return;
+    if ($caret === undefined)
+        return;
+    const target = event.target;
+    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) => (upload = `${progress}% done`), (error) => (upload = error), (url, thumbnail) => {
+        // Upload completed successfully, now we can get the download URL
+        $caret?.edit(embed, embed.withURLs(url, thumbnail).withDescription(''));
+        upload = undefined;
+    });
+}
+function handleImageSelection(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/editor/EmbedEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import EmbedNode from '../../models/chapter/EmbedNode';
+declare const __propDef: {
+    props: {
+        embed: EmbedNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmbedEditorProps = typeof __propDef.props;
+export type EmbedEditorEvents = typeof __propDef.events;
+export type EmbedEditorSlots = typeof __propDef.slots;
+export default class EmbedEditor extends SvelteComponentTyped<EmbedEditorProps, EmbedEditorEvents, EmbedEditorSlots> {
+}
+export {};

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

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

package/components/editor/Icon.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        icon: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
+}
+export {};

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

@@ -1,27 +1,22 @@
-<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>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>
 
 <div

package/components/editor/ImageChooser.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Image } from '../../models/book/BookMedia';
+declare const __propDef: {
+    props: {
+        select: (image: Image) => void;
+        selection: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageChooserProps = typeof __propDef.props;
+export type ImageChooserEvents = typeof __propDef.events;
+export type ImageChooserSlots = typeof __propDef.slots;
+export default class ImageChooser extends SvelteComponentTyped<ImageChooserProps, ImageChooserEvents, ImageChooserSlots> {
+}
+export {};

package/components/editor/InlineCodeEditor.svelte

@@ -0,0 +1,12 @@
+<script>import LanguageEditor from './LanguageEditor.svelte';
+import { getCaret } from '../page/Contexts';
+export let code;
+let caret = getCaret();
+</script>
+
+<span>
+    <LanguageEditor
+        language={code.getMeta()}
+        edit={(lang) => $caret?.edit(code, code.withMeta(lang))}
+    />
+</span>

package/components/editor/InlineCodeEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type InlineCodeNode from '../../models/chapter/InlineCodeNode';
+declare const __propDef: {
+    props: {
+        code: InlineCodeNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineCodeEditorProps = typeof __propDef.props;
+export type InlineCodeEditorEvents = typeof __propDef.events;
+export type InlineCodeEditorSlots = typeof __propDef.slots;
+export default class InlineCodeEditor extends SvelteComponentTyped<InlineCodeEditorProps, InlineCodeEditorEvents, InlineCodeEditorSlots> {
+}
+export {};

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

@@ -1,17 +1,12 @@
-<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>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>
 
 <code>

package/components/editor/LabelEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type LabelNode from '../../models/chapter/LabelNode';
+declare const __propDef: {
+    props: {
+        label: LabelNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LabelEditorProps = typeof __propDef.props;
+export type LabelEditorEvents = typeof __propDef.events;
+export type LabelEditorSlots = typeof __propDef.slots;
+export default class LabelEditor extends SvelteComponentTyped<LabelEditorProps, LabelEditorEvents, LabelEditorSlots> {
+}
+export {};

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

@@ -1,11 +1,8 @@
-<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>import Options from '../app/Options.svelte';
+import Note from './Note.svelte';
+export let language;
+export let edit;
+const languages = ['', 'html', 'css', 'javascript', 'python'];
 </script>
 
 <Options

package/components/editor/LanguageEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        language: string;
+        edit: (newValue: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LanguageEditorProps = typeof __propDef.props;
+export type LanguageEditorEvents = typeof __propDef.events;
+export type LanguageEditorSlots = typeof __propDef.slots;
+export default class LanguageEditor extends SvelteComponentTyped<LanguageEditorProps, LanguageEditorEvents, LanguageEditorSlots> {
+}
+export {};

package/components/editor/LinkEditor.svelte

@@ -0,0 +1,100 @@
+<script>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 '../page/Contexts';
+export let link;
+let caret = getCaret();
+let edition = getEdition();
+let chapter = getChapter();
+$: url = link.getMeta();
+function saveEdit(value) {
+    $caret?.edit(link, link.withMeta(value));
+}
+function isValidURL(url) {
+    // 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) {
+    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 = [];
+$: {
+    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/editor/LinkEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type LinkNode from '../../models/chapter/LinkNode';
+declare const __propDef: {
+    props: {
+        link: LinkNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LinkEditorProps = typeof __propDef.props;
+export type LinkEditorEvents = typeof __propDef.events;
+export type LinkEditorSlots = typeof __propDef.slots;
+export default class LinkEditor extends SvelteComponentTyped<LinkEditorProps, LinkEditorEvents, LinkEditorSlots> {
+}
+export {};

package/components/editor/Note.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  NoteProps */
+/** @typedef {typeof __propDef.events}  NoteEvents */
+/** @typedef {typeof __propDef.slots}  NoteSlots */
+export default class Note extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type NoteProps = typeof __propDef.props;
+export type NoteEvents = typeof __propDef.events;
+export type NoteSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};