bookish-press 0.4.0 → 0.4.3

package/components/editor/ConfirmButton.svelte

@@ -1,5 +1,7 @@
-<script>import { onMount } from "svelte";
+<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;
@@ -8,13 +10,15 @@ let timeoutID = undefined;
 let isMounted = false;
 onMount(() => {
     isMounted = true;
-    return () => isMounted = false;
+    return () => (isMounted = false);
 });
 function execute() {
     if (!confirming && !executing) {
         confirming = true;
-        timeoutID = setTimeout(() => { if (isMounted)
-            confirming = false; }, 2000);
+        timeoutID = setTimeout(() => {
+            if (isMounted)
+                confirming = false;
+        }, 2000);
     }
     else if (confirming) {
         command()?.finally(() => {
@@ -29,15 +33,17 @@ function execute() {
 }
 </script>
 
-<button 
-    disabled={executing} 
-    on:click={execute} 
-    class={confirming ? "bookish-editor-confirm" : ""}>
-        { confirming ? confirmLabel : commandLabel }
-</button>
+<Button
+    disabled={executing}
+    {tooltip}
+    command={execute}
+    class={confirming ? 'bookish-editor-confirm' : ''}
+>
+    {confirming ? confirmLabel : commandLabel}
+</Button>
 
 <style>
-    button.bookish-editor-confirm {
+    :global(bookish-editor-confirm) {
         animation: failure 100ms infinite;
     }
-</style>
+</style>

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

@@ -2,17 +2,18 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         commandLabel: string;
+        tooltip: string;
         confirmLabel: string;
-        command: () => Promise<void> | undefined;
+        command: () => Promise<void> | void;
     };
     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 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

@@ -1,28 +1,36 @@
-<script>import { getCaret, getEdition } from "../page/Contexts";
+<script>import Options from '../app/Options.svelte';
+import Note from './Note.svelte';
+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));
+let edition = getEdition();
+$: glossary = $edition?.getGlossary();
+function handleChange(glossaryID) {
+    $caret?.edit(definition, definition.withMeta(glossaryID));
 }
 // 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`;
+$: 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>
 
-<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 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}
-</span>
+{/if}

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type DefinitionNode from "../../models/chapter/DefinitionNode";
+import type DefinitionNode from '../../models/chapter/DefinitionNode';
 declare const __propDef: {
     props: {
         definition: DefinitionNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type DefinitionEditorProps = typeof __propDef.props;
-export declare type DefinitionEditorEvents = typeof __propDef.events;
-export declare type DefinitionEditorSlots = typeof __propDef.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

@@ -2,86 +2,136 @@
 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';
+import Note from './Note.svelte';
+import { getBook, getCaret } from '../page/Contexts';
 export let embed;
-let book = getBook();
 let caret = getCaret();
 let upload = undefined;
 $: description = embed.getDescription();
-$: book.getMedia();
+let book = getBook();
 function isValidURL(url) {
     // Is it a valid URL?
     try {
         let test = new URL(url);
-        if (test.protocol === "http:" || test.protocol === "https:")
+        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();
+    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) => {
+    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(""));
+        $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));
+    $caret?.edit(embed, embed.getURL() === image.url
+        ? embed.withURL('').withDescription('')
+        : embed.withURL(image.url));
 }
 </script>
 
 {#if $caret?.root instanceof EmbedNode}
-    <ToolbarSpacer/>
+    <ToolbarSpacer />
 {:else}
-    Position <PositionEditor value={embed.getPosition()} edit={position => $caret?.edit(embed, embed.withPosition(position)) } />
+    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"/>
+<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/>
-<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}
+<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;
+        }}
     />
-</code>
-<ToolbarSpacer/>
-{upload}
-<ImageChooser select={handleImageSelection} selection={embed.getURL()} />
+{: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

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type EmbedEditorProps = typeof __propDef.props;
-export declare type EmbedEditorEvents = typeof __propDef.events;
-export declare type EmbedEditorSlots = typeof __propDef.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/components/editor/Icon.svelte

@@ -0,0 +1,17 @@
+<script>export let icon;
+</script>
+
+<span>
+    {@html icon}
+</span>
+
+<style>
+    span {
+        vertical-align: middle;
+    }
+
+    span :global(svg) {
+        width: 1em;
+        height: 1em;
+    }
+</style>

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/components/editor/ImageChooser.svelte

@@ -1,7 +1,8 @@
 <script>import { onMount } from 'svelte';
-import { getBook } from '../page/Contexts';
+import { getBook, getCaret } from '../page/Contexts';
 export let select;
 export let selection;
+let editor = getCaret();
 let book = getBook();
 let images = undefined;
 let expanded = false;
@@ -10,45 +11,63 @@ function updateImages(newImages) {
 }
 // Load the latest images in the book, and keep them updated as they change.
 onMount(() => {
-    const media = book.getMedia();
+    if ($book === undefined)
+        return;
+    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}
+<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 }
-            />
+    <div class="images">
+        {#if images === undefined}
+            Loading images
         {:else}
-            No images uploaded
-        {/each}
-    {/if}
+            <!-- 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>
 </div>
 
 <style>
     .bookish-image-chooser {
-        margin-top: var(--bookish-app-chrome-padding);
-        height: 3em;
-        overflow-y: hidden;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .images {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        overflow-x: scroll;
     }
 
     .bookish-image-chooser.expanded {
@@ -58,13 +77,13 @@ onMount(() => {
 
     .bookish-image-chooser-image {
         display: inline-block;
-        height: 3em;
-        margin-right: var(--bookish-app-chrome-padding);
+        height: 2em;
         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));
+        outline: var(--app-chrome-border-size) solid
+            var(--app-interactive-color);
+        outline-offset: calc(-1 * var(--app-chrome-border-size));
     }
-</style>
+</style>

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

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ImageChooserProps = typeof __propDef.props;
-export declare type ImageChooserEvents = typeof __propDef.events;
-export declare type ImageChooserSlots = typeof __propDef.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

@@ -1,9 +1,12 @@
-<script>import LanguageEditor from "./LanguageEditor.svelte";
-import { getCaret } from "../page/Contexts";
+<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>
+    <LanguageEditor
+        language={code.getMeta()}
+        edit={(lang) => $caret?.edit(code, code.withMeta(lang))}
+    />
+</span>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type InlineCodeNode from "../../models/chapter/InlineCodeNode";
+import type InlineCodeNode from '../../models/chapter/InlineCodeNode';
 declare const __propDef: {
     props: {
         code: InlineCodeNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InlineCodeEditorProps = typeof __propDef.props;
-export declare type InlineCodeEditorEvents = typeof __propDef.events;
-export declare type InlineCodeEditorSlots = typeof __propDef.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/components/editor/LabelEditor.svelte

@@ -1,23 +1,32 @@
-<script>import TextEditor from "./TextEditor.svelte";
-import { getCaret, getChapter } from "../page/Contexts";
+<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 = $chapter?.chapter.getAST();
+$: ast =
+    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
 </script>
 
 <code>
-    <TextEditor 
-        startText={label.getMeta()} 
+    <TextEditor
+        text={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";
+        valid={(id) => {
+            if (id.length === 0) return "label ID can't be empty";
+            if (!/^[a-z]+$/.test(id))
+                return 'lable ID can only be a-z characters';
             // 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";
+            if (
+                ast &&
+                ast.getLabels().filter((l) => l.getMeta() === id).length >
+                    (label.getMeta() === id ? 1 : 0)
+            )
+                return 'label ID is already used';
         }}
-        save={labelID => $caret?.edit(label, label.withMeta(labelID)) }
+        save={(labelID) => $caret?.edit(label, label.withMeta(labelID))}
         saveOnExit
     />
-</code>
+</code>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type LabelNode from "../../models/chapter/LabelNode";
+import type LabelNode from '../../models/chapter/LabelNode';
 declare const __propDef: {
     props: {
         label: LabelNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LabelEditorProps = typeof __propDef.props;
-export declare type LabelEditorEvents = typeof __propDef.events;
-export declare type LabelEditorSlots = typeof __propDef.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/components/editor/LanguageEditor.svelte

@@ -1,11 +1,14 @@
-<script>import Note from "./Note.svelte";
+<script>import Options from '../app/Options.svelte';
+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"];
+const languages = ['', 'html', 'css', 'javascript', 'python'];
 </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>
+<Options
+    options={languages.map((lang) => [lang === '' ? 'plaintext' : lang, lang])}
+    value={language}
+    changed={(lang) => edit(lang)}
+    label="choose language"
+/>
+<Note>Choose a programming language to enable syntax highlighting.</Note>

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

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LanguageEditorProps = typeof __propDef.props;
-export declare type LanguageEditorEvents = typeof __propDef.events;
-export declare type LanguageEditorSlots = typeof __propDef.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 {};