bookish-press 0.4.1 → 0.4.16

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type RootNode from "../../models/chapter/RootNode";
+import type RootNode from '../../models/chapter/RootNode';
 declare const __propDef: {
     props: {
         ast: RootNode;
-        save: (node: RootNode) => Promise<void> | undefined;
+        save: (node: RootNode) => Promise<void> | void;
         chapter: boolean;
         autofocus?: boolean | undefined;
         component: ConstructorOfATypedSvelteComponent;
@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type BookishEditorProps = typeof __propDef.props;
-export declare type BookishEditorEvents = typeof __propDef.events;
-export declare type BookishEditorSlots = typeof __propDef.slots;
+export type BookishEditorProps = typeof __propDef.props;
+export type BookishEditorEvents = typeof __propDef.events;
+export type BookishEditorSlots = typeof __propDef.slots;
 export default class BookishEditor extends SvelteComponentTyped<BookishEditorProps, BookishEditorEvents, BookishEditorSlots> {
 }
 export {};

package/components/editor/CalloutEditor.svelte

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

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type CalloutNode from "../../models/chapter/CalloutNode";
+import type CalloutNode from '../../models/chapter/CalloutNode';
 declare const __propDef: {
     props: {
         callout: CalloutNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CalloutEditorProps = typeof __propDef.props;
-export declare type CalloutEditorEvents = typeof __propDef.events;
-export declare type CalloutEditorSlots = typeof __propDef.slots;
+export type CalloutEditorProps = typeof __propDef.props;
+export type CalloutEditorEvents = typeof __propDef.events;
+export type CalloutEditorSlots = typeof __propDef.slots;
 export default class CalloutEditor extends SvelteComponentTyped<CalloutEditorProps, CalloutEditorEvents, CalloutEditorSlots> {
 }
 export {};

package/components/editor/CaptionedCodeEditor.svelte

@@ -1,22 +1,26 @@
-<script>import LanguageEditor from "./LanguageEditor.svelte";
-import PositionEditor from "./PositionEditor.svelte";
-import Switch from "./Switch.svelte";
-import { getCaret } from "../page/Contexts";
+<script>import LanguageEditor from './LanguageEditor.svelte';
+import PositionEditor from './PositionEditor.svelte';
+import Switch from './Switch.svelte';
+import { getCaret } from '../page/Contexts';
 export let code;
 let caret = getCaret();
 </script>
+
 <span>
     <PositionEditor
         value={code.getPosition()}
-        edit={value => $caret?.edit(code, code.withPosition(value)) }
+        edit={(value) => $caret?.edit(code, code.withPosition(value))}
     />
-    <LanguageEditor language={code.getLanguage()} edit={lang => $caret?.edit(code, code.withLanguage(lang)) } />
-    {#if code.getLanguage() === "python"}
+    <LanguageEditor
+        language={code.getLanguage()}
+        edit={(lang) => $caret?.edit(code, code.withLanguage(lang))}
+    />
+    {#if code.getLanguage() === 'python'}
         <Switch
-            options={["executable", "read only"]}
-            value={code.isExecutable() ? "executable" : "read only"}
-            position=">"
-            edit={value => $caret?.edit(code, code.withExecutable(value === "executable")) }
+            options={['executable', 'read only']}
+            value={code.isExecutable() ? 'executable' : 'read only'}
+            edit={(value) =>
+                $caret?.edit(code, code.withExecutable(value === 'executable'))}
         />
     {/if}
-</span>
+</span>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type CodeNode from "../../models/chapter/CodeNode";
+import type CodeNode from '../../models/chapter/CodeNode';
 declare const __propDef: {
     props: {
         code: CodeNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CaptionedCodeEditorProps = typeof __propDef.props;
-export declare type CaptionedCodeEditorEvents = typeof __propDef.events;
-export declare type CaptionedCodeEditorSlots = typeof __propDef.slots;
+export type CaptionedCodeEditorProps = typeof __propDef.props;
+export type CaptionedCodeEditorEvents = typeof __propDef.events;
+export type CaptionedCodeEditorSlots = typeof __propDef.slots;
 export default class CaptionedCodeEditor extends SvelteComponentTyped<CaptionedCodeEditorProps, CaptionedCodeEditorEvents, CaptionedCodeEditorSlots> {
 }
 export {};

package/components/editor/CaretContext.d.ts

@@ -1,18 +1,50 @@
-import type { CaretRange } from "../../models/chapter/Caret";
-import type RootNode from "../../models/chapter/RootNode";
-import type CaretState from "./CaretState";
-import type Node from "../../models/chapter/Node";
-declare type CaretContext = {
-    range: CaretRange | undefined;
-    coordinate: {
-        x: number;
-        y: number;
-    } | undefined;
-    forceUpdate: Function;
-    context: CaretState | undefined;
-    edit: (previous: Node, edited: Node) => void;
-    setCaret: (range: CaretRange) => void;
+import type Caret from '../../models/chapter/Caret';
+import type { CaretRange } from '../../models/chapter/Caret';
+import type ParagraphNode from '../../models/chapter/ParagraphNode';
+import type AtomNode from '../../models/chapter/AtomNode';
+import type FormatNode from '../../models/chapter/FormatNode';
+import type BlocksNode from '../../models/chapter/BlocksNode';
+import type ListNode from '../../models/chapter/ListNode';
+import type TableNode from '../../models/chapter/TableNode';
+import type MetadataNode from '../../models/chapter/MetadataNode';
+import type RootNode from '../../models/chapter/RootNode';
+import type Edit from '../../models/chapter/Edit';
+import type CodeNode from '../../models/chapter/CodeNode';
+import type BlockNode from '../../models/chapter/BlockNode';
+import type Clipboard from './Clipboard';
+import type UndoState from './UndoState';
+import type Node from '../../models/chapter/Node';
+export type PasteContent = {
+    plain: string | undefined;
+};
+type CaretContext = {
+    chapter: boolean;
+    range: CaretRange;
+    start: Caret;
+    end: Caret;
+    isSelection: boolean;
     root: RootNode;
-    focused: boolean;
-} | undefined;
+    blocks: BlocksNode | undefined;
+    paragraph: ParagraphNode | undefined;
+    block: BlockNode | undefined;
+    includesList: boolean;
+    code: CodeNode | undefined;
+    list: ListNode | undefined;
+    table: TableNode | undefined;
+    format: FormatNode | undefined;
+    atom: AtomNode<any> | undefined;
+    meta: MetadataNode<any> | undefined;
+    startIsText: boolean;
+    endIsText: boolean;
+    startIsTextOrAtom: boolean;
+    endIsTextOrAtom: boolean;
+    atParagraphStart: boolean;
+    undoStack: UndoState[];
+    undoPosition: number;
+    undo: () => Edit;
+    redo: () => Edit;
+    clipboard: Clipboard;
+    handleCopy: (node: Node) => void;
+    handlePaste: (context: CaretContext, text: PasteContent | Node, save: boolean) => Edit;
+};
 export default CaretContext;

package/components/editor/CaretState.d.ts

@@ -1,47 +1,19 @@
-import type Caret from "../../models/chapter/Caret";
-import type { CaretRange } from "../../models/chapter/Caret";
-import type ParagraphNode from "../../models/chapter/ParagraphNode";
-import type AtomNode from "../../models/chapter/AtomNode";
-import type FormatNode from "../../models/chapter/FormatNode";
-import type BlocksNode from "../../models/chapter/BlocksNode";
-import type ListNode from "../../models/chapter/ListNode";
-import type TableNode from "../../models/chapter/TableNode";
-import type MetadataNode from "../../models/chapter/MetadataNode";
-import type RootNode from "../../models/chapter/RootNode";
-import type Edit from "../../models/chapter/Edit";
-import type CodeNode from "../../models/chapter/CodeNode";
-import type BlockNode from "../../models/chapter/BlockNode";
-import type Clipboard from "./Clipboard";
-import type UndoState from "./UndoState";
-import type Node from "../../models/chapter/Node";
-declare type CaretState = {
-    chapter: boolean;
-    range: CaretRange;
-    start: Caret;
-    end: Caret;
-    isSelection: boolean;
+import type { CaretRange } from '../../models/chapter/Caret';
+import type RootNode from '../../models/chapter/RootNode';
+import type CaretContext from './CaretContext';
+import type Node from '../../models/chapter/Node';
+import type Command from './Command';
+type CaretState = {
     root: RootNode;
-    blocks: BlocksNode | undefined;
-    paragraph: ParagraphNode | undefined;
-    block: BlockNode | undefined;
-    includesList: boolean;
-    code: CodeNode | undefined;
-    list: ListNode | undefined;
-    table: TableNode | undefined;
-    format: FormatNode | undefined;
-    atom: AtomNode<any> | undefined;
-    meta: MetadataNode<any> | undefined;
-    startIsText: boolean;
-    endIsText: boolean;
-    startIsTextOrAtom: boolean;
-    endIsTextOrAtom: boolean;
-    atParagraphStart: boolean;
-    undoStack: UndoState[];
-    undoPosition: number;
-    undo: () => Edit;
-    redo: () => Edit;
-    clipboard: Clipboard;
-    handleCopy: (node: Node) => void;
-    handlePaste: (context: CaretState, node: Node, save: boolean) => Edit;
+    range: CaretRange | undefined;
+    coordinate: {
+        x: number;
+        y: number;
+    } | undefined;
+    context: CaretContext | undefined;
+    edit: (previous: Node, edited: Node) => void;
+    setCaret: (range: CaretRange) => void;
+    executor: (command: Command, key: string) => void;
+    focused: boolean;
 };
 export default CaretState;

package/components/editor/CaretUtilities.d.ts

@@ -1,5 +1,5 @@
-import type Caret from "../../models/chapter/Caret";
-declare type CaretUtilities = {
+import type Caret from '../../models/chapter/Caret';
+type CaretUtilities = {
     getCaretOnLine: (caret: Caret, below: boolean) => Caret;
 };
 export default CaretUtilities;

package/components/editor/CaretView.svelte

@@ -0,0 +1,80 @@
+<script>import { afterUpdate } from 'svelte';
+export let left;
+export let top;
+export let height;
+export let linked;
+export let italic;
+export let bold;
+export let disabled;
+export let ignored;
+export let blink;
+let element;
+let headerHeight = 0;
+// When the caret updates, make sure it's in view.
+afterUpdate(() => {
+    element?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    headerHeight =
+        document.querySelector('.bookish-app > .header')
+            ?.offsetHeight ?? 0;
+});
+</script>
+
+<div
+    class="caret"
+    class:blink
+    class:disabled
+    class:ignored
+    class:bold
+    class:italic
+    class:linked
+    style:left="{left}px"
+    style:top="{top}px"
+    style:height="{height}px"
+    style:scroll-margin-top="{headerHeight}px"
+    bind:this={element}
+/>
+
+<style>
+    .caret {
+        left: 0;
+        top: 0;
+        width: 0px;
+        background: none;
+        outline: 1px solid var(--bookish-paragraph-color);
+        display: inline-block;
+        box-sizing: border-box;
+        position: absolute;
+        z-index: 1;
+    }
+
+    @keyframes caret-blink {
+        100% {
+            outline: none;
+        }
+    }
+
+    .disabled {
+        outline-color: var(--app-muted-color);
+    }
+
+    .blink {
+        animation: caret-blink 1s steps(2) infinite;
+    }
+
+    .italic {
+        transform: skew(-10deg);
+    }
+
+    .bold {
+        outline-width: 2px;
+    }
+
+    .ignored {
+        animation: failure 100ms 10;
+    }
+
+    .linked {
+        outline-width: 1px;
+        outline-color: var(--bookish-link-color);
+    }
+</style>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        left: number;
+        top: number;
+        height: number;
+        linked: boolean;
+        italic: boolean;
+        bold: boolean;
+        disabled: boolean;
+        ignored: boolean;
+        blink: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CaretViewProps = typeof __propDef.props;
+export type CaretViewEvents = typeof __propDef.events;
+export type CaretViewSlots = typeof __propDef.slots;
+export default class CaretView extends SvelteComponentTyped<CaretViewProps, CaretViewEvents, CaretViewSlots> {
+}
+export {};

package/components/editor/CitationsEditor.svelte

@@ -1,14 +1,14 @@
-<script>import { getCaret, getEdition } from "../page/Contexts";
-import Note from "./Note.svelte";
+<script>import Note from './Note.svelte';
+import Options from '../app/Options.svelte';
+import Button from '../app/Button.svelte';
+import { getCaret, getEdition } from '../page/Contexts';
 export let citations;
-let edition = getEdition();
 let caret = getCaret();
-let selection;
-function handleSelection() {
-    if (selection) {
+let edition = getEdition();
+let value = '';
+function handleSelection(selection) {
+    if (selection.length > 0)
         update(new Set([...citations.getMeta(), selection]));
-        selection = undefined;
-    }
 }
 function removeSelection(citationID) {
     let ids = new Set(citations.getMeta());
@@ -18,25 +18,36 @@ function removeSelection(citationID) {
 function update(set) {
     $caret?.edit(citations, citations.withMeta(Array.from(set)));
 }
-$: uncited = Object.keys($edition.getReferences()).filter(citationID => !citations.getMeta().includes(citationID)).sort();
+$: uncited =
+    $edition === undefined
+        ? []
+        : Object.keys($edition.getReferences())
+            .filter((citationID) => !citations.getMeta().includes(citationID))
+            .sort();
+let options = [];
+$: {
+    options = [];
+    options.push([
+        uncited.length > 0 ? 'Choose references' : 'No uncited references',
+        '',
+    ]);
+    for (const citationID of uncited)
+        options.push([citationID, citationID]);
+}
 </script>
 
-<select bind:value={selection} on:change={handleSelection}>
-    <option value={undefined}><em>{uncited.length > 0 ? "Choose references" : "No uncited references"}</em></option>
-    {#each uncited as citationID}
-        <option value={citationID}>{citationID}</option>
-    {/each}
-
-</select>
+<Options
+    {options}
+    bind:value
+    changed={handleSelection}
+    label="choose citations"
+/>
 {#each citations.getMeta() as citationID}
-    <sup>
-        {citationID}
-        <span tabIndex=0
-            style="cursor:pointer"
-            on:click={() => removeSelection(citationID) }
-            on:keydown={ event => { if(event.key === "Enter" || event.key === " ") removeSelection(citationID); }}
-        >&times;</span>
-    </sup>
+    {citationID}
+    <Button
+        tooltip="Remove citation"
+        command={() => removeSelection(citationID)}>&times; citation</Button
+    >
 {:else}
     <Note>&mdash;</Note>
-{/each}
+{/each}

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type CitationsNode from "../../models/chapter/CitationsNode";
+import type CitationsNode from '../../models/chapter/CitationsNode';
 declare const __propDef: {
     props: {
         citations: CitationsNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CitationsEditorProps = typeof __propDef.props;
-export declare type CitationsEditorEvents = typeof __propDef.events;
-export declare type CitationsEditorSlots = typeof __propDef.slots;
+export type CitationsEditorProps = typeof __propDef.props;
+export type CitationsEditorEvents = typeof __propDef.events;
+export type CitationsEditorSlots = typeof __propDef.slots;
 export default class CitationsEditor extends SvelteComponentTyped<CitationsEditorProps, CitationsEditorEvents, CitationsEditorSlots> {
 }
 export {};

package/components/editor/Clipboard.d.ts

@@ -1,3 +1,3 @@
-import type Node from "../../models/chapter/Node";
-declare type Clipboard = undefined | Node;
+import type Node from '../../models/chapter/Node';
+type Clipboard = undefined | Node;
 export default Clipboard;

package/components/editor/Command.d.ts

@@ -1,18 +1,19 @@
-import type Edit from "../../models/chapter/Edit";
-import type CaretUtilities from "./CaretUtilities";
-import type CaretState from "./CaretState";
-declare type Command = {
-    label?: string;
-    icon?: string;
+import type Edit from '../../models/chapter/Edit';
+import type CaretUtilities from './CaretUtilities';
+import type CaretContext from './CaretContext';
+type Command = {
+    icon: string;
     description: string;
     category: string;
-    control: boolean;
-    alt: boolean;
+    control: boolean | undefined;
+    press?: boolean | undefined;
+    alt: boolean | undefined;
     shift: boolean | undefined;
-    key?: string | string[];
+    key?: string | string[] | ((key: string) => boolean);
     code?: string;
-    visible: boolean | ((context: CaretState) => boolean);
-    active: boolean | ((context: CaretState, key?: string) => boolean);
-    handler: (context: CaretState, utilities: CaretUtilities, key: string) => Edit;
+    mutates: boolean;
+    visible: boolean | ((context: CaretContext) => boolean);
+    active: boolean | ((context: CaretContext, key?: string) => boolean);
+    handler: (context: CaretContext, utilities: CaretUtilities, key: string) => Edit;
 };
 export default Command;

package/components/editor/Commands.d.ts

@@ -1,3 +1,3 @@
-import type Command from "./Command";
+import type Command from './Command';
 declare const commands: Command[];
 export default commands;