bookish-press 0.4.1 → 0.4.16

package/components/chapter/Definition.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type DefinitionNode from "../../models/chapter/DefinitionNode";
+import type DefinitionNode from '../../models/chapter/DefinitionNode';
 declare const __propDef: {
     props: {
         node: DefinitionNode;
@@ -7,14 +7,11 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        interactor: {};
-        content: {};
-    };
+    slots: {};
 };
-export declare type DefinitionProps = typeof __propDef.props;
-export declare type DefinitionEvents = typeof __propDef.events;
-export declare type DefinitionSlots = typeof __propDef.slots;
+export type DefinitionProps = typeof __propDef.props;
+export type DefinitionEvents = typeof __propDef.events;
+export type DefinitionSlots = typeof __propDef.slots;
 export default class Definition extends SvelteComponentTyped<DefinitionProps, DefinitionEvents, DefinitionSlots> {
 }
 export {};

package/components/chapter/Embed.svelte

@@ -1,45 +1,52 @@
-<script>import renderPosition from './renderPosition';
-import { storage } from '../../models/Firebase';
-import Format from './Format.svelte';
-import { getCaret, getEdition, isEditable } from "../page/Contexts";
+<svelte:options immutable={true} />
+
+<script>import { storage } from '../../models/Firebase';
+import { isEditable, getCaret, getBook, } from '../page/Contexts';
+import Figure from './Figure.svelte';
+import { getContext } from 'svelte';
 export let node;
-export let placeholder = undefined;
+export let placeholder = '';
+export let imageOnly = false;
 $: url = node.getURL();
-$: position = node.getPosition();
 $: description = node.getDescription();
-$: credit = node.getCredit();
-$: caption = node.getCaption();
 let caret = getCaret();
+let book = getBook();
 let editable = isEditable();
-let edition = getEdition();
+// 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));
+            .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.";
+            dragFeedback = 'Only JPEG or PNG images are allowed.';
         else if (imageFiles.length > 1)
-            dragFeedback = "Only one image at a time please!";
+            dragFeedback = 'Only one image at a time please!';
         else {
-            dragFeedback = "Uploading…";
+            dragFeedback = 'Uploading…';
             const file = imageFiles[0];
-            const media = $edition.getBook()?.getMedia();
+            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) => {
+            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(""));
+                $caret?.edit(node, node.withURLs(url, thumbnails).withDescription(''));
                 dragging = false;
                 dragFeedback = undefined;
             });
@@ -49,7 +56,10 @@ function handleDrop(event) {
 function handleDrag(event) {
     event?.preventDefault();
     dragging = true;
-    dragFeedback = "Drop to upload…";
+    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)
@@ -64,59 +74,137 @@ function handleLoad() {
 function handleError() {
     imageError = true;
 }
+function handleClick() {
+    if (claimCaret)
+        claimCaret();
+}
 </script>
 
-<div class={"bookish-figure " + renderPosition(position)} data-nodeid={node.nodeID}>
-    {#if url.trim().length === 0 }
-        {#if editable }
-            <div 
-                class={`bookish-figure-unspecified ${dragging ? "bookish-figure-dragging" : ""}`}
-                on:drop|preventDefault={handleDrop}
-                on:dragover={handleDrag}
-                on:dragleave={handleDragLeave}
-            >{
-                dragFeedback !== undefined ? dragFeedback :
-                placeholder !== undefined ? placeholder :
-                    "Click or drag to choose or upload an image, or enter an image or video URL."
-            }
-            </div>
-        {:else}
-            <div class="bookish-figure-unspecified">No image or video specified</div>
-        {/if}
-    {:else}
-        {#if url.includes("https://www.youtube.com") || 
-            url.includes("https://youtu.be") || 
-            url.includes("https://www.tiktok.com") || 
-            url.includes("vimeo.com") }
-            <div class="bookish-figure-embed">
-                <iframe 
+{#if imageError}
+    <p class="bookish-figure-unspecified"
+        >{editable
+            ? 'Unable to load image. Is the URL correct? Are you offline?'
+            : 'Unable to load image'}</p
+    >
+{:else}
+    <Figure
+        {node}
+        caption={imageOnly ? undefined : node.getCaption()}
+        credit={imageOnly ? undefined : node.getCredit()}
+    >
+        {#if url.trim().length === 0}
+            {#if editable}
+                <p
+                    class={`bookish-figure-unspecified ${
+                        dragging ? 'bookish-figure-dragging' : ''
+                    }`}
+                    on:click|preventDefault={handleClick}
+                    tabIndex="0"
+                    on:keydown={(event) =>
+                        event.key === ' ' || event.key === 'Enter'
+                            ? handleClick()
+                            : undefined}
+                    on:drop|preventDefault={handleDrop}
+                    on:dragover={handleDrag}
+                    on:dragleave={handleDragLeave}
+                    >{dragFeedback !== undefined
+                        ? dragFeedback
+                        : placeholder.length > 0
+                        ? placeholder
+                        : 'Click or drag to choose or upload an image, or enter an image or video URL.'}
+                </p>
+            {:else}
+                <p class="bookish-figure-unspecified">Missing image or video</p>
+            {/if}
+        {:else if url.includes('https://www.youtube.com') || url.includes('https://youtu.be') || url.includes('https://www.tiktok.com') || url.includes('vimeo.com')}
+            <article class="bookish-figure-embed">
+                <iframe
                     class="bookish-figure-frame"
-                    title="Embedded video content from streaming service"
-                    src={url} 
-                    frameBorder="0" 
-                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
-                    allowFullScreen>
-                </iframe>
-            </div>
+                    title={description}
+                    src={url}
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                />
+            </article>
         {:else}
-            <img 
-                class={"bookish-figure-image"}
-                src={url.startsWith("http") ? url : "images/" + url}
-                srcset={node.hasSmallURL() ? `${node.getSmallURL()} 320w, ${url} 1024w` : undefined }
-                sizes={node.hasSmallURL() ? "(min-width: 1024px) 1024px, 320px" : undefined }
+            <img
+                class={'bookish-figure-image'}
+                src={url.startsWith('http') ? url : 'images/' + url}
+                srcset={node.hasSmallURL()
+                    ? `${node.getSmallURL()} 320w, ${url} 1024w`
+                    : undefined}
+                sizes={node.hasSmallURL()
+                    ? '(min-width: 1024px) 1024px, 320px'
+                    : undefined}
                 alt={description}
                 on:load={handleLoad}
                 on:error={handleError}
             />
         {/if}
-    {/if}
-    <div class="bookish-figure-caption">
-        <div class="bookish-figure-credit">
-            <Format node={credit} placeholder="credit" />
-        </div>
-        <Format node={caption} placeholder="caption" />
-    </div>
-    {#if imageError }
-        <div class="bookish-figure-unspecified">{ editable ? "Unable to load image. Is the URL correct? Are you offline?" : "Unable to load image" }</div>
-    {/if}
-</div>
+    </Figure>
+{/if}
+
+<style>
+    .bookish-figure {
+        margin-top: var(--bookish-paragraph-spacing);
+        margin-bottom: var(--bookish-paragraph-spacing);
+        width: 100%;
+    }
+
+    .bookish-figure-image {
+        border-radius: var(--bookish-roundedness);
+        max-width: 100%;
+        width: 100%;
+        height: auto;
+        margin-bottom: 0;
+    }
+
+    :global(.dark) .bookish-figure-image {
+        filter: brightness(50%);
+    }
+
+    .bookish-figure-embed {
+        position: relative;
+        display: block;
+        width: 100%;
+        padding: 0;
+        overflow: hidden;
+        border-radius: var(--bookish-roundedness);
+    }
+
+    .bookish-figure-embed::before {
+        /* Make the embed 16:9 */
+        padding-top: 56.25%;
+        display: block;
+        content: '';
+    }
+
+    .bookish-figure-unspecified {
+        width: 100%;
+        height: 8em;
+        font-family: var(--app-font);
+        background-color: var(--app-chrome-background);
+        color: var(--app-chrome-color);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .bookish-figure-dragging {
+        background-color: var(--app-interactive-color);
+        color: var(--app-font-color-inverted);
+    }
+
+    .bookish-figure-frame {
+        /* Fill the container */
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+    }
+</style>

package/components/chapter/Embed.svelte.d.ts

@@ -1,18 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import type EmbedNode from "../../models/chapter/EmbedNode";
+import type EmbedNode from '../../models/chapter/EmbedNode';
 declare const __propDef: {
     props: {
         node: EmbedNode;
         placeholder?: string | undefined;
+        imageOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type EmbedProps = typeof __propDef.props;
-export declare type EmbedEvents = typeof __propDef.events;
-export declare type EmbedSlots = typeof __propDef.slots;
+export type EmbedProps = typeof __propDef.props;
+export type EmbedEvents = typeof __propDef.events;
+export type EmbedSlots = typeof __propDef.slots;
 export default class Embed extends SvelteComponentTyped<EmbedProps, EmbedEvents, EmbedSlots> {
 }
 export {};

package/components/chapter/ErrorMessage.svelte

@@ -1,4 +1,9 @@
-<script>export let node;
+<svelte:options immutable={true} />
+
+<script>import Problem from './Problem.svelte';
+export let node;
 </script>
 
-<span class="bookish-error" data-nodeid={node.nodeID}>Error: {node.getError()}</span>
+<Problem
+    ><span data-nodeid={node.nodeID}>Error: {node.getError()}</span></Problem
+>

package/components/chapter/ErrorMessage.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type ErrorNode from "../../models/chapter/ErrorNode";
+import type ErrorNode from '../../models/chapter/ErrorNode';
 declare const __propDef: {
     props: {
         node: ErrorNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ErrorMessageProps = typeof __propDef.props;
-export declare type ErrorMessageEvents = typeof __propDef.events;
-export declare type ErrorMessageSlots = typeof __propDef.slots;
+export type ErrorMessageProps = typeof __propDef.props;
+export type ErrorMessageEvents = typeof __propDef.events;
+export type ErrorMessageSlots = typeof __propDef.slots;
 export default class ErrorMessage extends SvelteComponentTyped<ErrorMessageProps, ErrorMessageEvents, ErrorMessageSlots> {
 }
 export {};

package/components/chapter/ExtendedPrism.d.ts

@@ -0,0 +1,2 @@
+export default Prism;
+import Prism from "prismjs";

package/components/chapter/ExtendedPrism.js

@@ -0,0 +1,69 @@
+import Prism from 'prismjs';
+
+Prism.languages['python'] = {
+    comment: {
+        pattern: /(^|[^\\])#.*/,
+        lookbehind: true,
+        greedy: true,
+    },
+    'string-interpolation': {
+        pattern:
+            /(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,
+        greedy: true,
+        inside: {
+            interpolation: {
+                // "{" <expression> <optional "!s", "!r", or "!a"> <optional ":" format specifier> "}"
+                pattern:
+                    /((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,
+                lookbehind: true,
+                inside: {
+                    'format-spec': {
+                        pattern: /(:)[^:(){}]+(?=\}$)/,
+                        lookbehind: true,
+                    },
+                    'conversion-option': {
+                        pattern: /![sra](?=[:}]$)/,
+                        alias: 'punctuation',
+                    },
+                    rest: undefined,
+                },
+            },
+            string: /[\s\S]+/,
+        },
+    },
+    'triple-quoted-string': {
+        pattern: /(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,
+        greedy: true,
+        alias: 'string',
+    },
+    string: {
+        pattern: /(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,
+        greedy: true,
+    },
+    function: {
+        pattern: /((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,
+        lookbehind: true,
+    },
+    'class-name': {
+        pattern: /(\bclass\s+)\w+/i,
+        lookbehind: true,
+    },
+    decorator: {
+        pattern: /(^[\t ]*)@\w+(?:\.\w+)*/m,
+        lookbehind: true,
+        alias: ['annotation', 'punctuation'],
+        inside: {
+            punctuation: /\./,
+        },
+    },
+    keyword:
+        /\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,
+    builtin:
+        /\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
+    boolean: /\b(?:False|None|True)\b/,
+    number: /\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,
+    operator: /[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,
+    punctuation: /[{}[\];(),.:]/,
+};
+
+export default Prism;

package/components/chapter/Figure.svelte

@@ -0,0 +1,90 @@
+<svelte:options immutable={true} />
+
+<script>import Format from './Format.svelte';
+import Positioned from './Positioned.svelte';
+import { getCaret, isEditable } from '../page/Contexts';
+export let node;
+export let caption;
+export let credit = undefined;
+let editable = isEditable();
+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()}>
+    <figure class="bookish-figure" data-nodeid={node.nodeID}>
+        <div
+            class:selected
+            on:mousedown={focusFigure}
+            on:keydown={(event) =>
+                event.key === ' ' || event.key === 'Enter'
+                    ? focusFigure()
+                    : null}
+        >
+            <slot />
+        </div>
+        {#if caption !== undefined}
+            <figcaption class="bookish-figure-caption">
+                {#if caption}
+                    <Format node={caption} placeholder="caption" />
+                {/if}
+                {#if credit}
+                    <aside class="bookish-figure-credit">
+                        <Format node={credit} placeholder="credit" />
+                    </aside>
+                {/if}
+            </figcaption>
+        {/if}
+    </figure>
+</Positioned>
+
+<style>
+    figure {
+        margin: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+    }
+
+    .selected {
+        filter: opacity(50%);
+    }
+
+    .bookish-figure-caption {
+        text-align: center;
+        position: relative;
+        color: var(--bookish-muted-color);
+        line-height: var(--bookish-paragraph-line-height-tight);
+        font-size: var(--bookish-block-font-size);
+        margin-top: var(--bookish-block-padding);
+        margin-bottom: var(--bookish-block-padding);
+    }
+
+    .bookish-figure-credit {
+        display: block;
+        position: absolute;
+        top: -1em;
+        right: 0;
+        text-align: right;
+        font-style: italic;
+        font-size: var(--bookish-small-font-size);
+    }
+</style>

package/components/chapter/Figure.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type TableNode from '../../models/chapter/TableNode';
+import type EmbedNode from '../../models/chapter/EmbedNode';
+import type CodeNode from '../../models/chapter/CodeNode';
+import type FormatNode from '../../models/chapter/FormatNode';
+declare const __propDef: {
+    props: {
+        node: TableNode | EmbedNode | CodeNode;
+        caption: FormatNode | undefined;
+        credit?: FormatNode | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FigureProps = typeof __propDef.props;
+export type FigureEvents = typeof __propDef.events;
+export type FigureSlots = typeof __propDef.slots;
+export default class Figure extends SvelteComponentTyped<FigureProps, FigureEvents, FigureSlots> {
+}
+export {};

package/components/chapter/Footnote.svelte

@@ -1,31 +1,54 @@
+<svelte:options immutable={true} />
+
 <script>import Atom from './Atom.svelte';
 import Marginal from './Marginal.svelte';
 import Format from './Format.svelte';
-import { getCaret, getChapter, getEdition } from "../page/Contexts";
-import { afterUpdate } from "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?
-$: chapterNode = $chapter?.chapter?.getAST();
-$: number = chapterNode?.getFootnotes().indexOf(node);
-$: letter = number === undefined ? undefined : $edition.getFootnoteSymbol(number);
-$: focused = chapterNode && $caret && $caret.range && $caret.range.start.node.hasAncestor(chapterNode, node);
+$: 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());
 </script>
 
-<Atom node={node}>
+<Atom {node}>
     <span class={`bookish-footnote-link`} data-nodeid={node.nodeID}>
-        <Marginal id={"footnote-" + number}>
-            <sup slot="interactor" class="bookish-footnote-symbol">{letter}</sup>
+        <Marginal
+            {node}
+            id={'footnote-' + number}
+            label="footnote, press escape to edit"
+        >
+            <sup slot="interactor" class="bookish-footnote-symbol">{letter}</sup
+            >
             <!-- We prevent default on the span to prevent mouse events from bubbling up to the footnote symbol. This is key for two reasons:
                  1) clicks on the footnote select the footnote atom node itself
                  2) we want to be able to click on footnote text and we can't do that if the footnote sets the caret to the atom after clicks. -->
-            <span slot="content" class={`bookish-footnote ${focused ? "bookish-footnote-focused" : ""}`} on:mousedown|preventDefault>
-                <sup class="bookish-footnote-symbol">{letter}</sup><Format node={content} placeholder="footnote"/></span>
+            <span
+                slot="content"
+                class={`bookish-footnote ${
+                    focused ? 'bookish-footnote-focused' : ''
+                }`}
+                on:mousedown|preventDefault
+            >
+                <sup class="bookish-footnote-symbol">{letter}</sup><Format
+                    node={content}
+                    placeholder="footnote"
+                /></span
+            >
         </Marginal>
     </span>
 </Atom>
@@ -34,4 +57,44 @@ afterUpdate(() => $chapter?.layoutMarginals());
     .bookish-footnote-focused {
         outline: 2px solid var(--bookish-highlight-color);
     }
-</style>
+
+    .bookish-footnote {
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-small-font-size);
+        font-style: normal;
+        color: var(--bookish-paragraph-color);
+        font-weight: 300;
+        font-size: var(--bookish-small-font-size);
+        line-height: 1.5em;
+    }
+
+    .bookish-footnote-symbol {
+        font-family: var(--bookish-paragraph-font-family);
+        font-weight: normal;
+        color: var(--bookish-link-color);
+        position: relative;
+    }
+
+    /* This enables us to layout the numbers and letters in a neat right-aligned floating grid. */
+    .bookish-footnote {
+        position: relative;
+    }
+
+    .bookish-footnote {
+        display: block;
+        line-height: var(--bookish-paragraph-line-height-tight);
+        margin-left: 1rem;
+        margin-bottom: 1rem;
+        text-align: left;
+    }
+
+    .bookish-footnote .bookish-footnote-symbol {
+        display: block;
+        float: left;
+        margin-top: -0.5em;
+        position: absolute;
+        left: -1.75em;
+        text-align: right;
+        width: 1.5em; /* Just enough space for 2 digits, a bit of a hack */
+    }
+</style>