bookish-press 0.4.0 → 0.4.16

package/components/editor/LinkEditor.svelte

@@ -1,6 +1,10 @@
-<script>import URLEditor from "./URLEditor.svelte";
-import { getCaret, getChapter, getEdition } from "../page/Contexts";
-import ToolbarIcon from "./ToolbarIcon.svelte";
+<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();
@@ -9,67 +13,88 @@ $: 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:")
+        if (test.protocol === 'http:' || test.protocol === 'https:')
             return true;
     }
     catch (_) { }
     return false;
 }
-function getURLError(urlOrChapter) {
+function validate(urlOrChapter) {
     if (urlOrChapter.length === 0)
-        return "Can't be empty.";
+        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(":");
+    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();
+    const correspondingChapter = chapterID === '' && $chapter
+        ? $chapter.chapter.getAST($edition)
+        : $edition?.getChapter(chapterID)?.getAST($edition);
     if (correspondingChapter === undefined)
-        return "Not a valid URL or chapter.";
+        return 'Not a valid URL or chapter.';
     if (!correspondingChapter.hasLabel(labelID))
-        return "Not a valid chapter label.";
+        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 
-        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);
+    <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);
             }
         }}
     >
-        <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>
+        <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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type LinkNode from "../../models/chapter/LinkNode";
+import type LinkNode from '../../models/chapter/LinkNode';
 declare const __propDef: {
     props: {
         link: LinkNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LinkEditorProps = typeof __propDef.props;
-export declare type LinkEditorEvents = typeof __propDef.events;
-export declare type LinkEditorSlots = typeof __propDef.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

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

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

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

package/components/editor/PositionEditor.svelte

@@ -1,4 +1,7 @@
-<script>import Switch from "./Switch.svelte";
+<script>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;
 export let edit;
 function editAsString(newValue) {
@@ -7,8 +10,8 @@ function editAsString(newValue) {
 </script>
 
 <Switch
-    position={value}
-    options={["<", "|", ">"]}
-    value={value}
-    edit={editAsString} 
-/>
+    options={['<', '|', '>']}
+    icons={{ '<': LeftIcon, '|': MiddleIcon, '>': RightIcon }}
+    {value}
+    edit={editAsString}
+/>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type Position from "../../models/chapter/Position";
+import type Position from '../../models/chapter/Position';
 declare const __propDef: {
     props: {
         value: string;
@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PositionEditorProps = typeof __propDef.props;
-export declare type PositionEditorEvents = typeof __propDef.events;
-export declare type PositionEditorSlots = typeof __propDef.slots;
+export type PositionEditorProps = typeof __propDef.props;
+export type PositionEditorEvents = typeof __propDef.events;
+export type PositionEditorSlots = typeof __propDef.slots;
 export default class PositionEditor extends SvelteComponentTyped<PositionEditorProps, PositionEditorEvents, PositionEditorSlots> {
 }
 export {};

package/components/editor/QuoteEditor.svelte

@@ -1,5 +1,10 @@
-<script>import PositionEditor from "./PositionEditor.svelte";
+<script>import { getCaret } from '../page/Contexts';
+import PositionEditor from './PositionEditor.svelte';
 export let quote;
+let caret = getCaret();
 </script>
 
-<PositionEditor value={quote.getPosition()} edit={position => quote.withPosition(position)} />
+<PositionEditor
+    value={quote.getPosition()}
+    edit={(position) => $caret?.edit(quote, quote.withPosition(position))}
+/>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type QuoteNode from "../../models/chapter/QuoteNode";
+import type QuoteNode from '../../models/chapter/QuoteNode';
 declare const __propDef: {
     props: {
         quote: QuoteNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type QuoteEditorProps = typeof __propDef.props;
-export declare type QuoteEditorEvents = typeof __propDef.events;
-export declare type QuoteEditorSlots = typeof __propDef.slots;
+export type QuoteEditorProps = typeof __propDef.props;
+export type QuoteEditorEvents = typeof __propDef.events;
+export type QuoteEditorSlots = typeof __propDef.slots;
 export default class QuoteEditor extends SvelteComponentTyped<QuoteEditorProps, QuoteEditorEvents, QuoteEditorSlots> {
 }
 export {};

package/components/editor/Switch.svelte

@@ -1,6 +1,7 @@
-<script>export let options;
+<script>import Icon from './Icon.svelte';
+export let options;
+export let icons = undefined;
 export let value;
-export let position;
 export let enabled = undefined;
 export let edit;
 function handleClick(event) {
@@ -11,46 +12,72 @@ function handleClick(event) {
 }
 </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} 
+<span class="switch">
+    {#each options as option}
+        <button
+            class={`option ${value === option ? 'selected' : ''}`}
+            data-value={option}
             disabled={enabled === false}
-            on:click|stopPropagation={handleClick}>
+            on:click|stopPropagation={handleClick}
+        >
+            {#if icons && option in icons}
+                <Icon icon={icons[option]} />
+            {:else}
                 {option}
+            {/if}
         </button>
     {/each}
 </span>
 
 <style>
-    .bookish-app-switch {
-        font-family: var(--bookish-app-chrome-font-family);
-        font-size: var(--bookish-app-chrome-font-size);
+    button {
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+        color: var(--app-font-color);
+        background-color: var(--app-chrome-background);
+        padding: var(--app-chrome-padding);
+        border: none;
+        border-radius: 0;
     }
 
-    .bookish-app-switch-option {
-        display: inline-block;
-        background-color: var(--bookish-app-chrome-background);
+    button:hover:enabled:not(.selected) {
         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);
+        background-color: var(--app-interactive-color);
+        color: var(--app-font-color-inverted);
+    }
+
+    button.selected {
+        background-color: var(--app-border-color);
+        color: var(--app-font-color-inverted);
+    }
+
+    button:disabled {
+        opacity: 0.3;
+        cursor: auto;
+    }
+
+    .switch {
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+        white-space: nowrap;
     }
 
-    .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);
+    .option {
+        display: inline-block;
+        background-color: var(--app-chrome-background);
+        padding-left: var(--app-chrome-padding);
+        padding-right: var(--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);
+    .option:first-child {
+        border-top-left-radius: var(--app-chrome-roundedness);
+        border-bottom-left-radius: var(--app-chrome-roundedness);
+        margin-left: var(--app-chrome-padding);
     }
 
-    .bookish-app-switch-option-selected {
-        background-color: var(--bookish-app-chrome-hover-background);
+    .option:last-child {
+        border-top-right-radius: var(--app-chrome-roundedness);
+        border-bottom-right-radius: var(--app-chrome-roundedness);
+        margin-right: var(--app-chrome-padding);
     }
-</style>
+</style>

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         options: string[];
+        icons?: Record<string, string> | undefined;
         value: string;
-        position: string;
         enabled?: boolean | undefined;
         edit: (newValue: string) => void;
     };
@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SwitchProps = typeof __propDef.props;
-export declare type SwitchEvents = typeof __propDef.events;
-export declare type SwitchSlots = typeof __propDef.slots;
+export type SwitchProps = typeof __propDef.props;
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
 export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
 }
 export {};

package/components/editor/TableEditor.svelte

@@ -0,0 +1,10 @@
+<script>import { getCaret } from '../page/Contexts';
+import PositionEditor from './PositionEditor.svelte';
+export let table;
+let caret = getCaret();
+</script>
+
+<PositionEditor
+    value={table.getPosition()}
+    edit={(position) => $caret?.edit(table, table.withPosition(position))}
+/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type TableNode from '../../models/chapter/TableNode';
+declare const __propDef: {
+    props: {
+        table: TableNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableEditorProps = typeof __propDef.props;
+export type TableEditorEvents = typeof __propDef.events;
+export type TableEditorSlots = typeof __propDef.slots;
+export default class TableEditor extends SvelteComponentTyped<TableEditorProps, TableEditorEvents, TableEditorSlots> {
+}
+export {};