bookish-press 0.4.45 → 0.4.47

package/{components → src/lib/components}/chapter/Comment.svelte

@@ -1,23 +1,35 @@
 <svelte:options immutable={true} />
 
-<script>import Atom from './Atom.svelte';
-import Marginal from './Marginal.svelte';
-import Format from './Format.svelte';
-import { getChapter, isChapterEditable, getCaret, getEdition, } from '../page/Contexts';
-import { afterUpdate } from 'svelte';
-import Icon from '../editor/Icon.svelte';
-import CommentIcon from '../editor/icons/comment.svg?raw';
-export let node;
-let chapter = getChapter();
-let edition = getEdition();
-let editable = isChapterEditable();
-let caret = getCaret();
-$: chapterNode =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
-$: focused =
-    $caret && $caret.range && node.contains($caret.range.start.node);
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
+<script lang="ts">
+    import type CommentNode from '$lib/models/chapter/CommentNode';
+    import Atom from './Atom.svelte';
+    import Marginal from './Marginal.svelte';
+    import Format from './Format.svelte';
+    import {
+        getChapter,
+        isChapterEditable,
+        getCaret,
+        getEdition,
+    } from '$lib/components/page/Contexts';
+    import { afterUpdate } from 'svelte';
+    import Icon from '../editor/Icon.svelte';
+    import CommentIcon from '../editor/icons/comment.svg?raw';
+
+    export let node: CommentNode;
+
+    let chapter = getChapter();
+    let edition = getEdition();
+    let editable = isChapterEditable();
+
+    let caret = getCaret();
+
+    $: chapterNode =
+        $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+    $: focused =
+        $caret && $caret.range && node.contains($caret.range.start.node);
+
+    // Position the marginals on every render.
+    afterUpdate(() => $chapter?.layoutMarginals());
 </script>
 
 <Atom {node}>

package/{components → src/lib/components}/chapter/Definition.svelte

@@ -1,22 +1,28 @@
 <svelte:options immutable={true} />
 
-<script>import Parser from '../../models/chapter/Parser';
-import Text from './Text.svelte';
-import Format from './Format.svelte';
-import Marginal from './Marginal.svelte';
-import Problem from './Problem.svelte';
-import { getChapter, getEdition } from '../page/Contexts';
-import { afterUpdate } from 'svelte';
-export let node;
-let edition = getEdition();
-let chapter = getChapter();
-// Find the definition.
-$: glossaryID = node.getMeta();
-$: phrase = node.getText();
-$: glossary = $edition?.getGlossary() ?? {};
-$: entry = glossary[glossaryID];
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
+<script lang="ts">
+    import Parser from '$lib/models/chapter/Parser';
+    import type DefinitionNode from '$lib/models/chapter/DefinitionNode';
+    import Text from './Text.svelte';
+    import Format from './Format.svelte';
+    import Marginal from './Marginal.svelte';
+    import Problem from './Problem.svelte';
+    import { getChapter, getEdition } from '../page/Contexts';
+    import { afterUpdate } from 'svelte';
+
+    export let node: DefinitionNode;
+
+    let edition = getEdition();
+    let chapter = getChapter();
+
+    // Find the definition.
+    $: glossaryID = node.getMeta();
+    $: phrase = node.getText();
+    $: glossary = $edition?.getGlossary() ?? {};
+    $: entry = glossary[glossaryID];
+
+    // Position the marginals on every render.
+    afterUpdate(() => $chapter?.layoutMarginals());
 </script>
 
 <!-- Error if there's no corresponding entry. -->

package/{components → src/lib/components}/chapter/Embed.svelte

@@ -1,84 +1,104 @@
 <svelte:options immutable={true} />
 
-<script>import { storage } from '../../models/Firebase';
-import { getCaret, getBook, getBase } from '../page/Contexts';
-import Figure from './Figure.svelte';
-import { getContext } from 'svelte';
-export let node;
-export let editable = false;
-export let placeholder = '';
-export let imageOnly = false;
-$: url = node.getURL();
-$: description = node.getDescription();
-let caret = getCaret();
-let book = getBook();
-let base = getBase();
-// Bookish editor should have passed down a way to set the active editor.
-let claimCaret = getContext('claimeditor');
-let dragging = false;
-let dragFeedback = undefined;
-let imageError = false;
-$: if (node)
-    imageError = false;
-function handleDrop(event) {
-    event.preventDefault();
-    if (event.dataTransfer?.items) {
-        // Get the files and convert them to file opens, then filter by allowed file extensions
-        const imageFiles = [...event.dataTransfer.items]
-            .filter((item) => item.kind === 'file')
-            .map((item) => item.getAsFile())
-            .filter((file) => file !== null && /.*\.(jpg|jpeg|png)/i.test(file.name));
-        if (imageFiles.length === 0)
-            dragFeedback = 'Only JPEG or PNG images are allowed.';
-        else if (imageFiles.length > 1)
-            dragFeedback = 'Only one image at a time please!';
-        else {
-            dragFeedback = 'Uploading…';
-            const file = imageFiles[0];
-            const media = $book?.getMedia();
-            if (file === null)
-                return;
-            if (storage === undefined)
-                return;
-            if (media === undefined)
-                return;
-            media.upload(file, (progress) => (dragFeedback = `${progress}% done`), (error) => {
-                dragFeedback = error;
-                dragging = false;
-            }, (url, thumbnails) => {
-                // Upload completed successfully, now we can get the download URL
-                $caret?.edit(node, node.withURLs(url, thumbnails).withDescription(''));
-                dragging = false;
-                dragFeedback = undefined;
-            });
+<script lang="ts">
+    import type EmbedNode from '$lib/models/chapter/EmbedNode';
+    import { storage } from '$lib/models/Firebase';
+    import { getCaret, getBook, getBase } from '$lib/components/page/Contexts';
+    import Figure from './Figure.svelte';
+    import { getContext } from 'svelte';
+
+    export let node: EmbedNode;
+    export let editable: boolean = false;
+    export let placeholder: string = '';
+    export let imageOnly: boolean = false;
+
+    $: url = node.getURL();
+    $: description = node.getDescription();
+
+    let caret = getCaret();
+    let book = getBook();
+    let base = getBase();
+
+    // Bookish editor should have passed down a way to set the active editor.
+    let claimCaret = getContext<Function>('claimeditor');
+
+    let dragging = false;
+    let dragFeedback: undefined | string = undefined;
+    let imageError = false;
+    $: if (node) imageError = false;
+
+    function handleDrop(event: DragEvent) {
+        event.preventDefault();
+        if (event.dataTransfer?.items) {
+            // Get the files and convert them to file opens, then filter by allowed file extensions
+            const imageFiles = [...event.dataTransfer.items]
+                .filter((item) => item.kind === 'file')
+                .map((item) => item.getAsFile())
+                .filter(
+                    (file) =>
+                        file !== null && /.*\.(jpg|jpeg|png)/i.test(file.name)
+                );
+            if (imageFiles.length === 0)
+                dragFeedback = 'Only JPEG or PNG images are allowed.';
+            else if (imageFiles.length > 1)
+                dragFeedback = 'Only one image at a time please!';
+            else {
+                dragFeedback = 'Uploading…';
+
+                const file = imageFiles[0];
+                const media = $book?.getMedia();
+
+                if (file === null) return;
+                if (storage === undefined) return;
+                if (media === undefined) return;
+
+                media.upload(
+                    file,
+                    (progress: number) => (dragFeedback = `${progress}% done`),
+                    (error: string) => {
+                        dragFeedback = error;
+                        dragging = false;
+                    },
+                    (url: string, thumbnails: string) => {
+                        // Upload completed successfully, now we can get the download URL
+                        $caret?.edit(
+                            node,
+                            node.withURLs(url, thumbnails).withDescription('')
+                        );
+                        dragging = false;
+                        dragFeedback = undefined;
+                    }
+                );
+            }
         }
     }
-}
-function handleDrag(event) {
-    event?.preventDefault();
-    dragging = true;
-    dragFeedback = 'Drop to upload…';
-    // If we have a way to claim the caret, claim it, since we want to be able to make an edit with the active caret.
-    if (claimCaret)
-        claimCaret();
-}
-function handleDragLeave(event) {
-    if (event.target !== event.currentTarget)
-        return;
-    event?.preventDefault();
-    dragging = false;
-    dragFeedback = undefined;
-}
-function handleLoad() {
-    imageError = false;
-}
-function handleError() {
-    imageError = true;
-}
-function handleClick() {
-    if (claimCaret)
-        claimCaret();
-}
+
+    function handleDrag(event: DragEvent) {
+        event?.preventDefault();
+        dragging = true;
+        dragFeedback = 'Drop to upload…';
+        // If we have a way to claim the caret, claim it, since we want to be able to make an edit with the active caret.
+        if (claimCaret) claimCaret();
+    }
+
+    function handleDragLeave(event: DragEvent) {
+        if (event.target !== event.currentTarget) return;
+        event?.preventDefault();
+        dragging = false;
+        dragFeedback = undefined;
+    }
+
+    function handleLoad() {
+        imageError = false;
+    }
+
+    function handleError() {
+        imageError = true;
+    }
+
+    function handleClick() {
+        if (claimCaret) claimCaret();
+    }
 </script>
 
 {#if imageError}

package/src/lib/components/chapter/ErrorMessage.svelte

@@ -0,0 +1,12 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+    import type ErrorNode from '$lib/models/chapter/ErrorNode';
+    import Problem from './Problem.svelte';
+
+    export let node: ErrorNode;
+</script>
+
+<Problem
+    ><span data-nodeid={node.nodeID}>Error: {node.getError()}</span></Problem
+>

package/{components → src/lib/components}/chapter/Figure.svelte

@@ -1,31 +1,39 @@
 <svelte:options immutable={true} />
 
-<script>import Format from './Format.svelte';
-import Positioned from './Positioned.svelte';
-import { getCaret, isChapterEditable } from '../page/Contexts';
-export let node;
-export let caption;
-export let credit = undefined;
-let editable = isChapterEditable();
-let caret = getCaret();
-$: selected = $caret?.range?.start.node === node;
-function focusFigure() {
-    if (!editable || $caret === undefined)
-        return;
-    // if (node instanceof EmbedNode) {
-    //     return $caret.setCaret({
-    //         start: { node, index: 0 },
-    //         end: { node, index: 0 },
-    //     });
-    // } else {
-    const firstCaret = node.getFirstCaret();
-    if (firstCaret)
-        $caret.setCaret({
-            start: firstCaret,
-            end: firstCaret,
-        });
-    // }
-}
+<script lang="ts">
+    import type TableNode from '$lib/models/chapter/TableNode';
+    import type EmbedNode from '$lib/models/chapter/EmbedNode';
+    import Format from './Format.svelte';
+    import type CodeNode from '$lib/models/chapter/CodeNode';
+    import type FormatNode from '$lib/models/chapter/FormatNode';
+    import Positioned from './Positioned.svelte';
+    import { getCaret, isChapterEditable } from '../page/Contexts';
+
+    export let node: TableNode | EmbedNode | CodeNode;
+    export let caption: FormatNode | undefined;
+    export let credit: FormatNode | undefined = undefined;
+
+    let editable = isChapterEditable();
+    let caret = getCaret();
+
+    $: selected = $caret?.range?.start.node === node;
+
+    function focusFigure() {
+        if (!editable || $caret === undefined) return;
+        // if (node instanceof EmbedNode) {
+        //     return $caret.setCaret({
+        //         start: { node, index: 0 },
+        //         end: { node, index: 0 },
+        //     });
+        // } else {
+        const firstCaret = node.getFirstCaret();
+        if (firstCaret)
+            $caret.setCaret({
+                start: firstCaret,
+                end: firstCaret,
+            });
+        // }
+    }
 </script>
 
 <Positioned position={node.getPosition()}>

package/{components → src/lib/components}/chapter/Footnote.svelte

@@ -1,28 +1,40 @@
 <svelte:options immutable={true} />
 
-<script>import Atom from './Atom.svelte';
-import Marginal from './Marginal.svelte';
-import Format from './Format.svelte';
-import { getChapter, getEdition, getCaret, } from '../page/Contexts';
-import { afterUpdate } from 'svelte';
-export let node;
-$: content = node.getMeta();
-let caret = getCaret();
-let chapter = getChapter();
-let edition = getEdition();
-// What footnote number is this?
-$: ast =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
-$: number = ast?.getFootnotes().indexOf(node);
-$: letter =
-    number === undefined ? undefined : $edition?.getFootnoteSymbol(number);
-$: focused =
-    ast &&
+<script lang="ts">
+    import type FootnoteNode from '$lib/models/chapter/FootnoteNode';
+    import Atom from '$lib/components/chapter/Atom.svelte';
+    import Marginal from '$lib/components/chapter/Marginal.svelte';
+    import Format from './Format.svelte';
+    import {
+        getChapter,
+        getEdition,
+        getCaret,
+    } from '$lib/components/page/Contexts';
+    import { afterUpdate } from 'svelte';
+
+    export let node: FootnoteNode;
+
+    $: content = node.getMeta();
+    let caret = getCaret();
+
+    let chapter = getChapter();
+    let edition = getEdition();
+
+    // What footnote number is this?
+    $: ast =
+        $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+    $: number = ast?.getFootnotes().indexOf(node);
+    $: letter =
+        number === undefined ? undefined : $edition?.getFootnoteSymbol(number);
+
+    $: focused =
+        ast &&
         $caret &&
         $caret.range &&
         $caret.range.start.node.hasAncestor(ast, node);
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
+
+    // Position the marginals on every render.
+    afterUpdate(() => $chapter?.layoutMarginals());
 </script>
 
 <Atom {node}>

package/{components → src/lib/components}/chapter/Format.svelte

@@ -1,41 +1,46 @@
 <svelte:options immutable={true} />
 
-<script>import FormatNode from '../../models/chapter/FormatNode';
-import CitationsNode from '../../models/chapter/CitationsNode';
-import CommentNode from '../../models/chapter/CommentNode';
-import DefinitionNode from '../../models/chapter/DefinitionNode';
-import FootnoteNode from '../../models/chapter/FootnoteNode';
-import InlineCodeNode from '../../models/chapter/InlineCodeNode';
-import LabelNode from '../../models/chapter/LabelNode';
-import LinkNode from '../../models/chapter/LinkNode';
-import TextNode from '../../models/chapter/TextNode';
-import Problem from './Problem.svelte';
-import Citations from './Citations.svelte';
-import Definition from './Definition.svelte';
-import Footnote from './Footnote.svelte';
-import InlineCode from './InlineCode.svelte';
-import Label from './Label.svelte';
-import Link from './Link.svelte';
-import Comment from './Comment.svelte';
-import Text from './Text.svelte';
-import Format from './Format.svelte';
-import { isChapterEditable } from '../page/Contexts';
-export let node;
-export let editable = false;
-export let placeholder = undefined;
-$: format = node.getFormat();
-$: tag =
-    format === '*'
-        ? 'strong'
-        : format === '_'
+<script lang="ts">
+    import FormatNode from '$lib/models/chapter/FormatNode';
+    import CitationsNode from '$lib/models/chapter/CitationsNode';
+    import CommentNode from '$lib/models/chapter/CommentNode';
+    import DefinitionNode from '$lib/models/chapter/DefinitionNode';
+    import FootnoteNode from '$lib/models/chapter/FootnoteNode';
+    import InlineCodeNode from '$lib/models/chapter/InlineCodeNode';
+    import LabelNode from '$lib/models/chapter/LabelNode';
+    import LinkNode from '$lib/models/chapter/LinkNode';
+    import TextNode from '$lib/models/chapter/TextNode';
+    import Problem from './Problem.svelte';
+
+    import Citations from './Citations.svelte';
+    import Definition from './Definition.svelte';
+    import Footnote from './Footnote.svelte';
+    import InlineCode from './InlineCode.svelte';
+    import Label from './Label.svelte';
+    import Link from './Link.svelte';
+    import Comment from './Comment.svelte';
+    import Text from './Text.svelte';
+    import Format from './Format.svelte';
+    import { isChapterEditable } from '../page/Contexts';
+
+    export let node: FormatNode;
+    export let editable: boolean = false;
+    export let placeholder: string | undefined = undefined;
+
+    $: format = node.getFormat();
+    $: tag =
+        format === '*'
+            ? 'strong'
+            : format === '_'
             ? 'em'
             : format === '^'
-                ? 'sup'
-                : format === 'v'
-                    ? 'sub'
-                    : 'span';
-$: showPlaceholder =
-    node.isEmptyText() &&
+            ? 'sup'
+            : format === 'v'
+            ? 'sub'
+            : 'span';
+
+    $: showPlaceholder =
+        node.isEmptyText() &&
         placeholder !== undefined &&
         (editable || isChapterEditable());
 </script>

package/{components → src/lib/components}/chapter/InlineCode.svelte

@@ -1,10 +1,14 @@
 <svelte:options immutable={true} />
 
-<script>import { isChapterEditable } from '../page/Contexts';
-import Code from './Code.svelte';
-import Text from './Text.svelte';
-export let node;
-let editable = isChapterEditable();
+<script lang="ts">
+    import type InlineCodeNode from '$lib/models/chapter/InlineCodeNode';
+    import { isChapterEditable } from '../page/Contexts';
+    import Code from './Code.svelte';
+    import Text from './Text.svelte';
+
+    export let node: InlineCodeNode;
+
+    let editable = isChapterEditable();
 </script>
 
 {#if editable}

package/{components → src/lib/components}/chapter/Label.svelte

@@ -1,19 +1,28 @@
 <svelte:options immutable={true} />
 
-<script>import Atom from './Atom.svelte';
-import { getChapter, getEdition, isChapterEditable, } from '../page/Contexts';
-import Problem from './Problem.svelte';
-export let node;
-let editable = isChapterEditable();
-let chapter = getChapter();
-let edition = getEdition();
-$: ast =
-    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
-$: duplicate =
-    ast === undefined
-        ? false
-        : ast.getLabels().filter((l) => l.getMeta() === node.getMeta())
-            .length > 1;
+<script lang="ts">
+    import type LabelNode from '$lib/models/chapter/LabelNode';
+    import Atom from '$lib/components/chapter/Atom.svelte';
+    import {
+        getChapter,
+        getEdition,
+        isChapterEditable,
+    } from '../page/Contexts';
+    import Problem from './Problem.svelte';
+
+    export let node: LabelNode;
+
+    let editable = isChapterEditable();
+    let chapter = getChapter();
+    let edition = getEdition();
+
+    $: ast =
+        $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+    $: duplicate =
+        ast === undefined
+            ? false
+            : ast.getLabels().filter((l) => l.getMeta() === node.getMeta())
+                  .length > 1;
 </script>
 
 <Atom {node}>

package/{components → src/lib/components}/chapter/Link.svelte

@@ -1,28 +1,34 @@
 <svelte:options immutable={true} />
 
-<script>import { getBase, getEdition, isChapterEditable } from '../page/Contexts';
-import Text from './Text.svelte';
-import Problem from './Problem.svelte';
-export let node;
-let base = getBase();
-let editable = isChapterEditable();
-let edition = getEdition();
-$: url = node.getMeta();
-$: content = node.getText();
-function isInvalidChapterLink() {
-    // If it's internal, validate it.
-    if (!url.startsWith('http')) {
-        // Pull out any labels and just get the chapter name.
-        let chapter = url;
-        if (url.indexOf(':') >= 0) {
-            let parts = chapter.split(':');
-            chapter = parts[0];
+<script lang="ts">
+    import type LinkNode from '$lib/models/chapter/LinkNode';
+    import { getBase, getEdition, isChapterEditable } from '../page/Contexts';
+    import Text from './Text.svelte';
+    import Problem from './Problem.svelte';
+
+    export let node: LinkNode;
+
+    let base = getBase();
+    let editable = isChapterEditable();
+    let edition = getEdition();
+
+    $: url = node.getMeta();
+    $: content = node.getText();
+
+    function isInvalidChapterLink() {
+        // If it's internal, validate it.
+        if (!url.startsWith('http')) {
+            // Pull out any labels and just get the chapter name.
+            let chapter = url;
+            if (url.indexOf(':') >= 0) {
+                let parts = chapter.split(':');
+                chapter = parts[0];
+            }
+
+            if (chapter !== '' && !$edition?.hasChapter(chapter)) return true;
         }
-        if (chapter !== '' && !$edition?.hasChapter(chapter))
-            return true;
+        return false;
     }
-    return false;
-}
 </script>
 
 {#if editable}