bookish-press 0.4.47 → 0.4.48

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

@@ -1,48 +1,41 @@
-<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);
+<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]);
     }
-    $: {
-        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;
-        }
+    finally {
+        loading = undefined;
     }
+}
 </script>
 
 {#if emails === null}

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        uids: string[];
+        inheriteduids: string[];
+        writable: boolean;
+        atleastone: boolean;
+        change: (uids: string[]) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PermissionsProps = typeof __propDef.props;
+export type PermissionsEvents = typeof __propDef.events;
+export type PermissionsSlots = typeof __propDef.slots;
+export default class Permissions extends SvelteComponentTyped<PermissionsProps, PermissionsEvents, PermissionsSlots> {
+}
+export {};

package/components/editor/PositionEditor.svelte

@@ -0,0 +1,17 @@
+<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) {
+    edit(newValue);
+}
+</script>
+
+<Switch
+    options={['<', '|', '>']}
+    icons={{ '<': LeftIcon, '|': MiddleIcon, '>': RightIcon }}
+    {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 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

@@ -0,0 +1,10 @@
+<script>import { getCaret } from '../page/Contexts';
+import PositionEditor from './PositionEditor.svelte';
+export let quote;
+let caret = getCaret();
+</script>
+
+<PositionEditor
+    value={quote.getPosition()}
+    edit={(position) => $caret?.edit(quote, 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 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/{src/lib/components → components}/editor/Switch.svelte

@@ -1,18 +1,15 @@
-<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>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>
 
 <span class="switch">

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        options: string[];
+        icons?: Record<string, string> | undefined;
+        value: string;
+        enabled?: boolean | undefined;
+        edit: (newValue: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    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 {};

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

@@ -1,110 +1,98 @@
-<script lang="ts">
-    enum Status {
-        Viewing,
-        Editing,
-    }
-
-    export let text: string;
-    export let label: string;
-    export let placeholder: string;
-    export let valid: (text: string) => string | undefined;
-    export let save: (
-        text: string
-    ) => Promise<void> | undefined | void | string;
-    export let saveOnExit: boolean = false;
-    export let width: number | undefined = undefined;
-    export let clip: boolean = false;
-    export let move:
-        | ((el: HTMLElement, direction: -1 | 1) => void)
-        | undefined = undefined;
-
-    let status = Status.Viewing;
-    let field: HTMLInputElement | null = null;
-    let sizer: HTMLSpanElement | null = null;
-
-    $: error = valid(text);
-
-    // Grow the sizer when text or status changes.
-    $: {
-        if (sizer) {
-            // Set the invisible sizer to the text to set the container's width.
-            // The browser strips trailing spaces, causing jitter after a space, so we replace
-            // them with non-breaking spaces.
-            const sizedText = showPlaceholder()
-                ? placeholder
-                : text.replace(/\s/g, '\u00a0');
-            // Clip the text to prevent this editor from getting too long when editing or when asked to.. If it goes past one line,
-            // the measurements and layout are way off.
-            const trimmedText =
-                width !== undefined &&
-                (clip === true || status === Status.Editing)
-                    ? sizedText.substring(0, width) + '…'
-                    : sizedText;
-            sizer.innerHTML = trimmedText;
+<script>var Status;
+(function (Status) {
+    Status[Status["Viewing"] = 0] = "Viewing";
+    Status[Status["Editing"] = 1] = "Editing";
+})(Status || (Status = {}));
+export let text;
+export let label;
+export let placeholder;
+export let valid;
+export let save;
+export let saveOnExit = false;
+export let width = undefined;
+export let clip = false;
+export let move = undefined;
+let status = Status.Viewing;
+let field = null;
+let sizer = null;
+$: error = valid(text);
+// Grow the sizer when text or status changes.
+$: {
+    if (sizer) {
+        // Set the invisible sizer to the text to set the container's width.
+        // The browser strips trailing spaces, causing jitter after a space, so we replace
+        // them with non-breaking spaces.
+        const sizedText = showPlaceholder()
+            ? placeholder
+            : text.replace(/\s/g, '\u00a0');
+        // Clip the text to prevent this editor from getting too long when editing or when asked to.. If it goes past one line,
+        // the measurements and layout are way off.
+        const trimmedText = width !== undefined &&
+            (clip === true || status === Status.Editing)
+            ? sizedText.substring(0, width) + '…'
+            : sizedText;
+        sizer.innerHTML = trimmedText;
+    }
+}
+// When status changes, focus or blur.
+$: {
+    if (field) {
+        if (status === Status.Editing) {
+            field.focus();
         }
-    }
-
-    // When status changes, focus or blur.
-    $: {
-        if (field) {
-            if (status === Status.Editing) {
-                field.focus();
-            } else {
-                field.blur();
-            }
+        else {
+            field.blur();
         }
     }
-
-    // When text changes, save, unless we only save on exit.
-    $: {
-        if (!saveOnExit) saveText(text);
-    }
-
-    function showPlaceholder() {
-        return text === '';
-    }
-
-    function startEditing() {
-        status = Status.Editing;
-    }
-
-    function stopEditing() {
-        status = Status.Viewing;
-        if (saveOnExit) saveText(text);
-    }
-
-    function edit() {
-        if (field) {
-            text = field.value;
-            if (saveOnExit === false) saveText(text);
-        }
-    }
-
-    function saveText(newText: string) {
-        if (validate(newText) === undefined) {
-            const revisedText = save(newText);
-            if (typeof revisedText === 'string') {
-                text = revisedText;
-            }
-            if (revisedText instanceof Promise)
-                revisedText.catch((err: Error) => (error = err.message));
+}
+// When text changes, save, unless we only save on exit.
+$: {
+    if (!saveOnExit)
+        saveText(text);
+}
+function showPlaceholder() {
+    return text === '';
+}
+function startEditing() {
+    status = Status.Editing;
+}
+function stopEditing() {
+    status = Status.Viewing;
+    if (saveOnExit)
+        saveText(text);
+}
+function edit() {
+    if (field) {
+        text = field.value;
+        if (saveOnExit === false)
+            saveText(text);
+    }
+}
+function saveText(newText) {
+    if (validate(newText) === undefined) {
+        const revisedText = save(newText);
+        if (typeof revisedText === 'string') {
+            text = revisedText;
         }
+        if (revisedText instanceof Promise)
+            revisedText.catch((err) => (error = err.message));
+    }
+}
+function validate(value) {
+    return valid(value);
+}
+function handleKeyPress(event) {
+    if (event.key === 'Enter')
+        status = Status.Viewing;
+    else if (event.key === 'ArrowUp' && move && field) {
+        event.preventDefault();
+        move(field, -1);
     }
-
-    function validate(value: string): string | undefined {
-        return valid(value);
-    }
-
-    function handleKeyPress(event: KeyboardEvent) {
-        if (event.key === 'Enter') status = Status.Viewing;
-        else if (event.key === 'ArrowUp' && move && field) {
-            event.preventDefault();
-            move(field, -1);
-        } else if (event.key === 'ArrowDown' && move && field) {
-            event.preventDefault();
-            move(field, 1);
-        }
+    else if (event.key === 'ArrowDown' && move && field) {
+        event.preventDefault();
+        move(field, 1);
     }
+}
 </script>
 
 <span

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        label: string;
+        placeholder: string;
+        valid: (text: string) => string | undefined;
+        save: (text: string) => Promise<void> | undefined | void | string;
+        saveOnExit?: boolean | undefined;
+        width?: number | undefined;
+        clip?: boolean | undefined;
+        move?: ((el: HTMLElement, direction: -1 | 1) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextEditorProps = typeof __propDef.props;
+export type TextEditorEvents = typeof __propDef.events;
+export type TextEditorSlots = typeof __propDef.slots;
+export default class TextEditor extends SvelteComponentTyped<TextEditorProps, TextEditorEvents, TextEditorSlots> {
+}
+export {};

package/components/editor/Toggle.svelte

@@ -0,0 +1,41 @@
+<script>var Status;
+(function (Status) {
+    Status[Status["Viewing"] = 0] = "Viewing";
+    Status[Status["Saving"] = 1] = "Saving";
+    Status[Status["Error"] = 2] = "Error";
+})(Status || (Status = {}));
+export let on;
+export let save;
+let saving = Status.Viewing;
+function toggle() {
+    saving = Status.Saving;
+    const promise = save(!on);
+    if (promise === undefined) {
+        saving = Status.Viewing;
+        return;
+    }
+    promise
+        .then(() => (saving = Status.Viewing))
+        .catch(() => (saving = Status.Error));
+}
+</script>
+
+<div
+    class={`bookish-app-interactive ${
+        saving === Status.Saving ? ' bookish-text-editor-saving' : ''
+    } ${saving === Status.Error ? ' bookish-text-editor-error' : ''}`}
+    tabIndex="0"
+    role="switch"
+    aria-checked={on}
+    on:keydown={(event) =>
+        event.key === 'Enter' || event.key === 'Space' ? toggle() : undefined}
+    on:click={toggle}
+>
+    <slot />
+</div>
+
+<style>
+    .bookish-app-interactive {
+        cursor: pointer;
+    }
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        on: boolean;
+        save: (set: boolean) => Promise<void> | void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};