bookish-press 0.4.45 → 0.4.47

package/components/editor/LinkEditor.svelte

@@ -1,100 +0,0 @@
-<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

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

@@ -1,27 +0,0 @@
-/** @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 {};

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

@@ -1,20 +0,0 @@
-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

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

@@ -1,18 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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/components/editor/Switch.svelte.d.ts

@@ -1,20 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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/components/editor/TextEditor.svelte.d.ts

@@ -1,24 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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 {};

package/components/editor/Toolbar.svelte

@@ -1,249 +0,0 @@
-<script>import commands from './Commands';
-import TextNode from '../../models/chapter/TextNode';
-import AtomNode from '../../models/chapter/AtomNode';
-import LinkNode from '../../models/chapter/LinkNode';
-import LabelNode from '../../models/chapter/LabelNode';
-import InlineCodeNode from '../../models/chapter/InlineCodeNode';
-import CitationsNode from '../../models/chapter/CitationsNode';
-import DefinitionNode from '../../models/chapter/DefinitionNode';
-import CodeNode from '../../models/chapter/CodeNode';
-import CalloutNode from '../../models/chapter/CalloutNode';
-import EmbedNode from '../../models/chapter/EmbedNode';
-import QuoteNode from '../../models/chapter/QuoteNode';
-import LabelEditor from './LabelEditor.svelte';
-import InlineCodeEditor from './InlineCodeEditor.svelte';
-import CitationsEditor from './CitationsEditor.svelte';
-import LinkEditor from './LinkEditor.svelte';
-import DefinitionEditor from './DefinitionEditor.svelte';
-import CaptionedCodeEditor from './CaptionedCodeEditor.svelte';
-import CalloutEditor from './CalloutEditor.svelte';
-import QuoteEditor from './QuoteEditor.svelte';
-import EmbedEditor from './EmbedEditor.svelte';
-import TableEditor from './TableEditor.svelte';
-import ToolbarGroup from './ToolbarGroup.svelte';
-import Icon from './Icon.svelte';
-import Button from '../app/Button.svelte';
-import AnnotateIcon from './icons/annotate.svg?raw';
-import BlockIcon from './icons/block.svg?raw';
-import ClipboardIcon from './icons/clipboard.svg?raw';
-import LevelIcon from './icons/level.svg?raw';
-import ListIcon from './icons/list.svg?raw';
-import TextIcon from './icons/text.svg?raw';
-import TimeIcon from './icons/time.svg?raw';
-import TableIcon from './icons/table.svg?raw';
-import LinkIcon from './icons/link.svg?raw';
-import LabelIcon from './icons/label.svg?raw';
-import CitationIcon from './icons/citation.svg?raw';
-import DefineIcon from './icons/define.svg?raw';
-import CodeIcon from './icons/code.svg?raw';
-import CalloutIcon from './icons/callout.svg?raw';
-import QuoteIcon from './icons/quote.svg?raw';
-import MediaIcon from './icons/media.svg?raw';
-import TableNode from '../../models/chapter/TableNode';
-import { slide } from 'svelte/transition';
-const keyLabels = {
-    Digit0: '0',
-    Digit1: '1',
-    Digit2: '2',
-    Digit3: '3',
-    ArrowDown: '↓',
-    ArrowUp: '↑',
-    ArrowLeft: '←',
-    ArrowRight: '→',
-    Backspace: '\u232B',
-};
-const categoryOrder = {
-    navigation: 1,
-    selection: 2,
-    text: 3,
-    clipboard: 4,
-    annotation: 5,
-    paragraph: 6,
-    level: 7,
-    list: 8,
-    table: 9,
-    block: 10,
-};
-const categoryIcons = {
-    text: TextIcon,
-    clipboard: ClipboardIcon,
-    annotation: AnnotateIcon,
-    level: LevelIcon,
-    block: BlockIcon,
-    list: ListIcon,
-    table: TableIcon,
-    history: TimeIcon,
-};
-export let caret;
-$: context = caret.context;
-$: chapter = context?.root;
-let element = null;
-let categories = undefined;
-let commandsByCategory = {};
-let metaNode = undefined;
-let calloutNode = undefined;
-let quoteNode = undefined;
-let embedNode = undefined;
-let tableNode = undefined;
-function getShortcutDescription(command) {
-    const macOS = navigator.userAgent.indexOf('Mac') >= 0;
-    const controlSymbol = macOS ? '\u2318' : 'Ctrl+';
-    const altSymbol = macOS ? '\u2325' : 'Alt+';
-    const key = command.key
-        ? Array.isArray(command.key)
-            ? command.key.join('/')
-            : command.key
-        : command.code
-            ? command.code
-            : 'any';
-    const keyLabel = (typeof key === 'string'
-        ? key in keyLabels
-            ? keyLabels[key]
-            : key
-        : '—').toLocaleUpperCase();
-    return `${command.control ? controlSymbol : ''}${command.alt ? altSymbol : ''}${command.shift ? '\u21E7' : ''}${keyLabel}`;
-}
-// Update the above when the dependencies below change.
-$: {
-    if (context !== undefined && chapter) {
-        // Filter the commands by those interactive with a mouse and active.
-        const visible = commands.filter((command) => command.visible === true ||
-            (context &&
-                command.visible instanceof Function &&
-                command.visible(context)));
-        // Extract the active categories and sort them
-        categories = Array.from(new Set(commands.map((command) => command.category))).sort((a, b) => a in categoryOrder && b in categoryOrder
-            ? categoryOrder[a] - categoryOrder[b]
-            : 0);
-        // Make a list for each category of commands
-        commandsByCategory = {};
-        categories.forEach((cat) => {
-            if (commandsByCategory)
-                commandsByCategory[cat] = visible.filter((command) => command.category === cat);
-        });
-        const caretNode = context.start.node;
-        metaNode =
-            caretNode instanceof AtomNode
-                ? caretNode
-                : caretNode instanceof TextNode
-                    ? caretNode.getParent(chapter)
-                    : undefined;
-        calloutNode = caretNode.getClosestParentMatching(chapter, (p) => p instanceof CalloutNode);
-        quoteNode = caretNode.getClosestParentMatching(chapter, (p) => p instanceof QuoteNode);
-        embedNode =
-            caretNode instanceof EmbedNode
-                ? caretNode
-                : caretNode.getClosestParentMatching(chapter, (p) => p instanceof EmbedNode);
-        tableNode = caretNode.getClosestParentMatching(chapter, (p) => p instanceof TableNode);
-    }
-}
-function handleKeyPress(event) {
-    // Return focus to the editor if someone presses an unhandled enter
-    if ((event.key === 'Escape' || event.key === 'Enter') && element) {
-        const editor = element.closest('.bookish-editor');
-        if (editor instanceof HTMLElement) {
-            event.stopPropagation();
-            editor.focus();
-        }
-        return true;
-    }
-}
-</script>
-
-{#if chapter}
-    <section
-        class="bookish-editor-toolbar"
-        bind:this={element}
-        on:keypress={handleKeyPress}
-        on:keydown={handleKeyPress}
-        on:mousedown|stopPropagation={() => element?.focus()}
-        tabIndex="0"
-        transition:slide={{ duration: 200 }}
-    >
-        {#if context && categories}
-            {#each categories as cat}
-                {#if commandsByCategory[cat].length > 0}
-                    <ToolbarGroup
-                        icon={cat in categoryIcons
-                            ? categoryIcons[cat]
-                            : cat.charAt(0).toUpperCase() + cat.slice(1)}
-                    >
-                        {#each commandsByCategory[cat] as command}
-                            <Button
-                                disabled={command.active === false ||
-                                    (command.active instanceof Function &&
-                                        command.active.call(
-                                            undefined,
-                                            context
-                                        ) === false)}
-                                tooltip={command.description +
-                                    ' ' +
-                                    getShortcutDescription(command)}
-                                tabIndex="0"
-                                command={() =>
-                                    caret?.executor.call(
-                                        undefined,
-                                        command,
-                                        ''
-                                    )}
-                            >
-                                <Icon icon={command.icon} />
-                            </Button>
-                        {/each}
-                        {#if cat === 'table' && tableNode}
-                            <TableEditor table={tableNode} />
-                        {/if}
-                    </ToolbarGroup>
-                {/if}
-            {/each}
-        {/if}
-        {#if metaNode instanceof LinkNode}<ToolbarGroup icon={LinkIcon}
-                ><LinkEditor link={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof LabelNode}<ToolbarGroup icon={LabelIcon}
-                ><LabelEditor label={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof InlineCodeNode}<ToolbarGroup
-                icon={CodeIcon}
-                ><InlineCodeEditor code={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof CitationsNode}<ToolbarGroup
-                icon={CitationIcon}
-                ><CitationsEditor citations={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof DefinitionNode}<ToolbarGroup
-                icon={DefineIcon}
-                ><DefinitionEditor definition={metaNode} /></ToolbarGroup
-            >
-        {:else if metaNode instanceof CodeNode && context}<ToolbarGroup
-                icon={CodeIcon}
-                ><CaptionedCodeEditor code={metaNode} /></ToolbarGroup
-            >
-        {:else if calloutNode}<ToolbarGroup icon={CalloutIcon}
-                ><CalloutEditor callout={calloutNode} /></ToolbarGroup
-            >
-        {:else if quoteNode}<ToolbarGroup icon={QuoteIcon}
-                ><QuoteEditor quote={quoteNode} /></ToolbarGroup
-            >
-        {:else if embedNode}<ToolbarGroup icon={MediaIcon}
-                ><EmbedEditor embed={embedNode} /></ToolbarGroup
-            >
-        {/if}
-    </section>
-{/if}
-
-<style>
-    .bookish-editor-toolbar {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: baseline;
-        background: var(--bookish-background-color);
-        font-family: var(--app-font);
-        font-size: var(--app-chrome-font-size);
-    }
-
-    .bookish-editor-toolbar:focus {
-        outline: 2px solid var(--app-interactive-color);
-    }
-</style>

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

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type CaretState from './CaretState';
-declare const __propDef: {
-    props: {
-        caret: CaretState;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
-}
-export {};

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

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        icon: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToolbarGroupProps = typeof __propDef.props;
-export type ToolbarGroupEvents = typeof __propDef.events;
-export type ToolbarGroupSlots = typeof __propDef.slots;
-export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
-}
-export {};