bookish-press 0.4.0

package/components/editor/ConfirmButton.svelte

@@ -0,0 +1,43 @@
+<script>import { onMount } from "svelte";
+export let commandLabel;
+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} 
+    on:click={execute} 
+    class={confirming ? "bookish-editor-confirm" : ""}>
+        { confirming ? confirmLabel : commandLabel }
+</button>
+
+<style>
+    button.bookish-editor-confirm {
+        animation: failure 100ms infinite;
+    }
+</style>

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

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

package/components/editor/DefinitionEditor.svelte

@@ -0,0 +1,28 @@
+<script>import { getCaret, getEdition } from "../page/Contexts";
+export let definition;
+let edition = getEdition();
+let caret = getCaret();
+$: glossary = $edition.getGlossary();
+function handleChange(event) {
+    const target = event.target;
+    $caret?.edit(definition, definition.withMeta(target.value));
+}
+// Sort the glossary entries by phrase
+$: entries = Object.keys(glossary).map(key => { return { glossaryID: key, phrase: glossary[key].phrase }; }).sort((a, b) => a.phrase.localeCompare(b.phrase));
+$: refID = $edition.getRef()?.id;
+$: glossaryLink = `/write/${refID}/glossary`;
+</script>
+
+<span>
+    <select 
+        tabIndex=0
+        value={definition.getMeta()} 
+        on:change={handleChange}
+    >
+        <option value=""></option>
+        {#each entries as entry}<option value={entry.glossaryID}>{entry.phrase}</option>{/each}
+    </select>
+    {#if !(definition.getMeta() in glossary)}
+        <span class="bookish-editor-error">Choose a <a href={glossaryLink}>glossary</a> entry.</span>
+    {/if}
+</span>

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 declare type DefinitionEditorProps = typeof __propDef.props;
+export declare type DefinitionEditorEvents = typeof __propDef.events;
+export declare type DefinitionEditorSlots = typeof __propDef.slots;
+export default class DefinitionEditor extends SvelteComponentTyped<DefinitionEditorProps, DefinitionEditorEvents, DefinitionEditorSlots> {
+}
+export {};

package/components/editor/EmbedEditor.svelte

@@ -0,0 +1,87 @@
+<script>import PositionEditor from './PositionEditor.svelte';
+import EmbedNode from '../../models/chapter/EmbedNode';
+import TextEditor from './TextEditor.svelte';
+import { storage } from '../../models/Firebase';
+import { getBook, getCaret } from '../page/Contexts';
+import ToolbarSpacer from './ToolbarSpacer.svelte';
+import ImageChooser from './ImageChooser.svelte';
+import URLEditor from './URLEditor.svelte';
+export let embed;
+let book = getBook();
+let caret = getCaret();
+let upload = undefined;
+$: description = embed.getDescription();
+$: book.getMedia();
+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) {
+    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="bookish-file-upload">
+    <input type="file" on:input={handleImageChange} accept=".jpg,.jpeg,.png,.gif,image/jpeg,image/png,image/gif"/>
+    Upload
+</label>
+<ToolbarSpacer/>
+<code>
+    {#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;
+            }}
+        />
+    {/if}
+</code>
+<ToolbarSpacer/>
+<code>
+    <TextEditor
+        startText={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}
+    />
+</code>
+<ToolbarSpacer/>
+{upload}
+<ImageChooser select={handleImageSelection} selection={embed.getURL()} />

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 declare type EmbedEditorProps = typeof __propDef.props;
+export declare type EmbedEditorEvents = typeof __propDef.events;
+export declare type EmbedEditorSlots = typeof __propDef.slots;
+export default class EmbedEditor extends SvelteComponentTyped<EmbedEditorProps, EmbedEditorEvents, EmbedEditorSlots> {
+}
+export {};

package/components/editor/ImageChooser.svelte

@@ -0,0 +1,70 @@
+<script>import { onMount } from 'svelte';
+import { getBook } from '../page/Contexts';
+export let select;
+export let selection;
+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(() => {
+    const media = book.getMedia();
+    media.notify(updateImages);
+    return () => media.stopNotifying(updateImages);
+});
+</script>
+
+<div 
+    class={`bookish-image-chooser ${expanded ? "expanded" : ""}`}
+    tabIndex=0
+    on:click={() => expanded = !expanded}
+    on:keydown={event => event.key === "Enter" || event.key === " " ? expanded = !expanded : undefined }
+    on:mouseenter={() => expanded = true}
+    on:mouseleave={() => expanded = false}
+>
+    {#if images === undefined}
+        Loading images
+    {:else}
+        <!-- Sort the images by their URL. There's probably a more meaningful sort,
+                such as placing unused images at the front of the list. -->
+        {#each images.sort((a, b) => a.url.localeCompare(b.url)) as image }
+            <img 
+                class={`bookish-image-chooser-image ${image.url === selection ? "selected" : ""}`}
+                src={image.url} 
+                alt={`Image named ${image.url}`}
+                tabIndex=0
+                on:click|stopPropagation={() => select(image)}
+                on:keydown={event => event.key === "Enter" || event.key === " " ? select(image) : undefined }
+            />
+        {:else}
+            No images uploaded
+        {/each}
+    {/if}
+</div>
+
+<style>
+    .bookish-image-chooser {
+        margin-top: var(--bookish-app-chrome-padding);
+        height: 3em;
+        overflow-y: hidden;
+    }
+
+    .bookish-image-chooser.expanded {
+        height: auto;
+        overflow-y: auto;
+    }
+
+    .bookish-image-chooser-image {
+        display: inline-block;
+        height: 3em;
+        margin-right: var(--bookish-app-chrome-padding);
+        cursor: pointer;
+    }
+
+    .bookish-image-chooser-image.selected {
+        outline: var(--bookish-app-highlight-width) solid var(--bookish-highlight-color);
+        outline-offset: calc(-1 * var(--bookish-app-highlight-width));
+    }
+</style>

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 declare type ImageChooserProps = typeof __propDef.props;
+export declare type ImageChooserEvents = typeof __propDef.events;
+export declare type ImageChooserSlots = typeof __propDef.slots;
+export default class ImageChooser extends SvelteComponentTyped<ImageChooserProps, ImageChooserEvents, ImageChooserSlots> {
+}
+export {};

package/components/editor/InlineCodeEditor.svelte

@@ -0,0 +1,9 @@
+<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 declare type InlineCodeEditorProps = typeof __propDef.props;
+export declare type InlineCodeEditorEvents = typeof __propDef.events;
+export declare type InlineCodeEditorSlots = typeof __propDef.slots;
+export default class InlineCodeEditor extends SvelteComponentTyped<InlineCodeEditorProps, InlineCodeEditorEvents, InlineCodeEditorSlots> {
+}
+export {};

package/components/editor/LabelEditor.svelte

@@ -0,0 +1,23 @@
+<script>import TextEditor from "./TextEditor.svelte";
+import { getCaret, getChapter } from "../page/Contexts";
+export let label;
+let chapter = getChapter();
+let caret = getCaret();
+$: ast = $chapter?.chapter.getAST();
+</script>
+
+<code>
+    <TextEditor 
+        startText={label.getMeta()} 
+        label="Chapter label ID"
+        placeholder="label ID"
+        valid={ id => {
+            if(id.length === 0) return "Can't be empty";
+            if(!/^[a-z]+$/.test(id)) return "Can only be a-z";
+            // If it's different than what it is and there's already one, then error.
+            if(ast && ast.getLabels().filter(l => l.getMeta() === id).length > (label.getMeta() === id ? 1 : 0)) return "Another label has this ID";
+        }}
+        save={labelID => $caret?.edit(label, label.withMeta(labelID)) }
+        saveOnExit
+    />
+</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 declare type LabelEditorProps = typeof __propDef.props;
+export declare type LabelEditorEvents = typeof __propDef.events;
+export declare type LabelEditorSlots = typeof __propDef.slots;
+export default class LabelEditor extends SvelteComponentTyped<LabelEditorProps, LabelEditorEvents, LabelEditorSlots> {
+}
+export {};

package/components/editor/LanguageEditor.svelte

@@ -0,0 +1,11 @@
+<script>import Note from "./Note.svelte";
+export let language;
+export let edit;
+let value = language;
+const languages = ["C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript"];
+</script>
+
+<select bind:value={value} on:change={() => edit(value)}>
+    {#each languages as lang}<option value={lang.toLocaleLowerCase()}>{lang}</option>{/each}
+</select>
+<Note>Choose a programming language to enable syntax highlighting.</Note>

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 declare type LanguageEditorProps = typeof __propDef.props;
+export declare type LanguageEditorEvents = typeof __propDef.events;
+export declare type LanguageEditorSlots = typeof __propDef.slots;
+export default class LanguageEditor extends SvelteComponentTyped<LanguageEditorProps, LanguageEditorEvents, LanguageEditorSlots> {
+}
+export {};

package/components/editor/LinkEditor.svelte

@@ -0,0 +1,75 @@
+<script>import URLEditor from "./URLEditor.svelte";
+import { getCaret, getChapter, getEdition } from "../page/Contexts";
+import ToolbarIcon from "./ToolbarIcon.svelte";
+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 handleChapterChange(e) {
+    const target = e.target;
+    saveEdit(target.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 getURLError(urlOrChapter) {
+    if (urlOrChapter.length === 0)
+        return "Can't be empty.";
+    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.getChapter(chapterID)?.getAST();
+    if (correspondingChapter === undefined)
+        return "Not a valid URL or chapter.";
+    if (!correspondingChapter.hasLabel(labelID))
+        return "Not a valid chapter label.";
+}
+</script>
+
+<span>
+    <button 
+        title="Remove link."
+        on:click={() => {
+            if($caret?.context?.format) {
+                const newFormat = $caret.context.format.withSegmentReplaced(link, link.getText());
+                if(newFormat)
+                    $caret.edit($caret.context.format, newFormat);
+            }
+        }}
+    >
+        <ToolbarIcon name="unlink.svg"/>
+    </button>
+    <select name="chapterID" on:change={handleChapterChange} value={url}>
+        <option value="">URL</option>
+        {#if $chapter }
+            <option value={$chapter.chapter.getChapterID()}>{$chapter.chapter.getTitle()}</option>
+            <!-- Build the list of options (chapters and then any of the chapter's labels.) -->
+            {#each $edition.getChapters() as chapter }     
+                {#each chapter.getAST()?.getLabels() ?? [] as label }
+                    <option value={`${chapter.getChapterID()}:${label.getMeta()}`}>{chapter.getTitle() + ": " + label.getMeta()}</option>
+                {/each}
+            {/each}
+        {/if}
+    </select>
+    <code>
+        <URLEditor url={url} validator={getURLError} edit={ url => { saveEdit(url); return undefined; }} />
+    </code>
+</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 declare type LinkEditorProps = typeof __propDef.props;
+export declare type LinkEditorEvents = typeof __propDef.events;
+export declare type LinkEditorSlots = typeof __propDef.slots;
+export default class LinkEditor extends SvelteComponentTyped<LinkEditorProps, LinkEditorEvents, LinkEditorSlots> {
+}
+export {};

package/components/editor/Note.svelte

@@ -0,0 +1,9 @@
+<span><slot></slot></span>
+
+<style>
+    span {
+        font-size: small;
+        font-style: italic;
+        color: var(--bookish-app-chrome-muted);
+    }
+</style>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  NoteProps */
+/** @typedef {typeof __propDef.events}  NoteEvents */
+/** @typedef {typeof __propDef.slots}  NoteSlots */
+export default class Note extends SvelteComponentTyped<{}, {
+    [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: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/editor/PositionEditor.svelte

@@ -0,0 +1,14 @@
+<script>import Switch from "./Switch.svelte";
+export let value;
+export let edit;
+function editAsString(newValue) {
+    edit(newValue);
+}
+</script>
+
+<Switch
+    position={value}
+    options={["<", "|", ">"]}
+    value={value}
+    edit={editAsString} 
+/>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type Position from "../../models/chapter/Position";
+declare const __propDef: {
+    props: {
+        value: string;
+        edit: (newValue: Position) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PositionEditorProps = typeof __propDef.props;
+export declare type PositionEditorEvents = typeof __propDef.events;
+export declare type PositionEditorSlots = typeof __propDef.slots;
+export default class PositionEditor extends SvelteComponentTyped<PositionEditorProps, PositionEditorEvents, PositionEditorSlots> {
+}
+export {};

package/components/editor/QuoteEditor.svelte

@@ -0,0 +1,5 @@
+<script>import PositionEditor from "./PositionEditor.svelte";
+export let quote;
+</script>
+
+<PositionEditor value={quote.getPosition()} edit={position => quote.withPosition(position)} />

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type QuoteNode from "../../models/chapter/QuoteNode";
+declare const __propDef: {
+    props: {
+        quote: QuoteNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type QuoteEditorProps = typeof __propDef.props;
+export declare type QuoteEditorEvents = typeof __propDef.events;
+export declare type QuoteEditorSlots = typeof __propDef.slots;
+export default class QuoteEditor extends SvelteComponentTyped<QuoteEditorProps, QuoteEditorEvents, QuoteEditorSlots> {
+}
+export {};

package/components/editor/Switch.svelte

@@ -0,0 +1,56 @@
+<script>export let options;
+export let value;
+export let position;
+export let enabled = undefined;
+export let edit;
+function handleClick(event) {
+    const newValue = event.currentTarget.dataset.value;
+    if (newValue && options.includes(newValue)) {
+        edit(newValue);
+    }
+}
+</script>
+
+<span class={`bookish-app-switch bookish-app-${position === "<" ? "left" : position === ">" ? "right" : "middle"}`}>
+    {#each options as option }
+        <button 
+            class={`bookish-app-switch-option ${value === option ? "bookish-app-switch-option-selected" : ""}`} 
+            data-value={option} 
+            disabled={enabled === false}
+            on:click|stopPropagation={handleClick}>
+                {option}
+        </button>
+    {/each}
+</span>
+
+<style>
+    .bookish-app-switch {
+        font-family: var(--bookish-app-chrome-font-family);
+        font-size: var(--bookish-app-chrome-font-size);
+    }
+
+    .bookish-app-switch-option {
+        display: inline-block;
+        background-color: var(--bookish-app-chrome-background);
+        cursor: pointer;
+        padding-left: var(--bookish-app-chrome-padding);
+        padding-right: var(--bookish-app-chrome-padding);
+        border: var(--bookish-app-chrome-border-width) solid var(--bookish-app-chrome-border-color);
+    }
+
+    .bookish-app-switch-option:first-child {
+        border-top-left-radius: var(--bookish-app-chrome-roundedness);
+        border-bottom-left-radius: var(--bookish-app-chrome-roundedness);
+        margin-left: var(--bookish-app-chrome-padding);
+    }
+
+    .bookish-app-switch-option:last-child {
+        border-top-right-radius: var(--bookish-app-chrome-roundedness);
+        border-bottom-right-radius: var(--bookish-app-chrome-roundedness);
+        margin-right: var(--bookish-app-chrome-padding);
+    }
+
+    .bookish-app-switch-option-selected {
+        background-color: var(--bookish-app-chrome-hover-background);
+    }
+</style>