bookish-press 0.4.47 → 0.4.49

package/components/editor/Toolbar.svelte

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

@@ -0,0 +1,17 @@
+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/{src/lib/components → components}/editor/ToolbarGroup.svelte

@@ -1,8 +1,6 @@
-<script lang="ts">
-    import ToolbarIcon from './Icon.svelte';
-    import ToolbarSpacer from './ToolbarSpacer.svelte';
-
-    export let icon: string;
+<script>import ToolbarIcon from './Icon.svelte';
+import ToolbarSpacer from './ToolbarSpacer.svelte';
+export let icon;
 </script>
 
 <div class="toolbar-group">

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

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

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ToolbarSpacerProps */
+/** @typedef {typeof __propDef.events}  ToolbarSpacerEvents */
+/** @typedef {typeof __propDef.slots}  ToolbarSpacerSlots */
+export default class ToolbarSpacer extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ToolbarSpacerProps = typeof __propDef.props;
+export type ToolbarSpacerEvents = typeof __propDef.events;
+export type ToolbarSpacerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/editor/URLEditor.svelte

@@ -0,0 +1,13 @@
+<script>import TextEditor from './TextEditor.svelte';
+export let url;
+export let validator;
+export let edit;
+</script>
+
+<TextEditor
+    placeholder="url"
+    text={url}
+    label="URL editor"
+    valid={(url) => validator(url)}
+    save={(url) => edit(url)}
+/>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        url: string;
+        validator: (text: string) => undefined | string;
+        edit: (newURL: string) => string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UrlEditorProps = typeof __propDef.props;
+export type UrlEditorEvents = typeof __propDef.events;
+export type UrlEditorSlots = typeof __propDef.slots;
+export default class UrlEditor extends SvelteComponentTyped<UrlEditorProps, UrlEditorEvents, UrlEditorSlots> {
+}
+export {};

package/{src/lib/components/editor/UndoState.ts → components/editor/UndoState.d.ts}

@@ -1,6 +1,5 @@
-import type { IndexRange } from '$lib/models/chapter/Caret';
-import type Command from '$lib/components/editor/Command';
-
+import type { IndexRange } from '../../models/chapter/Caret';
+import type Command from './Command';
 type UndoState = {
     command: Command | undefined;
     bookdown: string;

package/components/editor/UndoState.js

@@ -0,0 +1 @@
+export {};

package/{src/lib/components → components}/page/Acknowledgements.svelte

@@ -1,22 +1,13 @@
-<script lang="ts">
-    import Parser from '$lib/models/chapter/Parser';
-    import ChapterBody from '$lib/components/chapter/ChapterBody.svelte';
-    import BookishEditor from '$lib/components/editor/BookishEditor.svelte';
-    import Instructions from '$lib/components/page/Instructions.svelte';
-    import {
-        getUser,
-        getEdition,
-        getLeasee,
-        isEditionEditable,
-        lease,
-    } from './Contexts';
-    import PageHeader from './PageHeader.svelte';
-
-    let auth = getUser();
-    let edition = getEdition();
-    let editable = isEditionEditable();
-
-    $: acknowledgements = $edition?.getAcknowledgements();
+<script>import Parser from '../../models/chapter/Parser';
+import ChapterBody from '../chapter/ChapterBody.svelte';
+import BookishEditor from '../editor/BookishEditor.svelte';
+import Instructions from './Instructions.svelte';
+import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
+import PageHeader from './PageHeader.svelte';
+let auth = getUser();
+let edition = getEdition();
+let editable = isEditionEditable();
+$: acknowledgements = $edition?.getAcknowledgements();
 </script>
 
 <Instructions {editable}>

package/components/page/Acknowledgements.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AcknowledgementsProps = typeof __propDef.props;
+export type AcknowledgementsEvents = typeof __propDef.events;
+export type AcknowledgementsSlots = typeof __propDef.slots;
+export default class Acknowledgements extends SvelteComponentTyped<AcknowledgementsProps, AcknowledgementsEvents, AcknowledgementsSlots> {
+}
+export {};

package/components/page/Authors.svelte

@@ -0,0 +1,85 @@
+<script>import Parser from '../../models/chapter/Parser';
+import TextEditor from '../editor/TextEditor.svelte';
+import Format from '../chapter/Format.svelte';
+import { afterUpdate } from 'svelte';
+import { getEdition, isBookEditable, isEditionEditable } from './Contexts';
+import Note from '../editor/Note.svelte';
+import Button from '../app/Button.svelte';
+export let editable;
+export let authors;
+export let inheritedAuthors = undefined;
+export let add;
+export let edit;
+export let remove;
+let edition = getEdition();
+let authorList = null;
+let newAuthor = false;
+$: authorsToShow =
+    authors.length > 0
+        ? authors
+        : inheritedAuthors !== undefined && inheritedAuthors.length > 0
+            ? inheritedAuthors
+            : undefined;
+function addAuthor() {
+    add();
+    newAuthor = true;
+}
+// When there's a new author, focus on it.
+afterUpdate(() => {
+    if (authors.length > 0 && authorList && newAuthor) {
+        const editors = authorList.querySelectorAll('input');
+        if (editors.length > 0) {
+            const lastAuthor = editors[editors.length - 1];
+            if (lastAuthor instanceof HTMLElement) {
+                lastAuthor.focus();
+            }
+        }
+        newAuthor = false;
+    }
+});
+</script>
+
+<p class="bookish-authors" bind:this={authorList}>
+    <!-- Editing and inherited authors? Say they're  -->
+    {#if authorsToShow === undefined}
+        No authors
+    {:else}
+        <em>by </em>
+        {#each authorsToShow as author, index}
+            {#if editable}
+                <TextEditor
+                    text={author}
+                    label={'Author name editor'}
+                    placeholder="author"
+                    valid={() => undefined}
+                    save={(text) =>
+                        /* If text is already empty, remove */ author.length >
+                            0 && text === ''
+                            ? remove(index)
+                            : edit(index, text)}
+                />
+            {:else}
+                <span
+                    ><Format
+                        node={Parser.parseFormat($edition, author)}
+                    /></span
+                >
+            {/if}
+            {#if index < authors.length - 1},&nbsp{/if}
+        {/each}
+    {/if}
+    {#if editable}
+        <Note>(edition authors)&nbsp;</Note>
+    {/if}
+    {#if editable}
+        &nbsp;<Button tooltip="add author" command={addAuthor}>+ author</Button>
+    {/if}
+</p>
+
+<style>
+    .bookish-authors {
+        font-family: var(--bookish-header-font-family);
+        font-style: italic;
+        margin: 0;
+    }
+</style>

package/components/page/Authors.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        editable: boolean;
+        authors: string[];
+        inheritedAuthors?: string[] | undefined;
+        add: () => Promise<void> | void;
+        edit: (index: number, text: string) => Promise<void> | void;
+        remove: (index: number) => Promise<void> | void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AuthorsProps = typeof __propDef.props;
+export type AuthorsEvents = typeof __propDef.events;
+export type AuthorsSlots = typeof __propDef.slots;
+export default class Authors extends SvelteComponentTyped<AuthorsProps, AuthorsEvents, AuthorsSlots> {
+}
+export {};