bookish-press 0.4.1 → 0.4.3

package/components/chapter/Definition.svelte

@@ -1,7 +1,10 @@
+<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;
@@ -10,29 +13,60 @@ let chapter = getChapter();
 // Find the definition.
 $: glossaryID = node.getMeta();
 $: phrase = node.getText();
-$: glossary = $edition.getGlossary();
+$: glossary = $edition?.getGlossary() ?? {};
 $: entry = glossary[glossaryID];
 // Position the marginals on every render.
 afterUpdate(() => $chapter?.layoutMarginals());
-</script>    
+</script>
 
 <!-- Error if there's no corresponding entry. -->
-<span class={`bookish-definition ${entry === undefined ? "bookish-error" : ""}`} data-nodeid={node.nodeID}>
+<span class="bookish-definition" data-nodeid={node.nodeID}>
     <Marginal
-        id={"glossary-" + glossaryID}
+        {node}
+        id={'glossary-' + glossaryID}
+        label="definition: {entry.phrase}"
     >
-        <slot name="interactor">
-            <Text node={phrase}/>
-        </slot>
-        <slot name="content">
-            <span class="bookish-definition-entry">
-                {#if entry === undefined }
-                    <span class="bookish-error">Unknown glossary entry "{ glossaryID }"</span>
-                {:else}
-                    <strong class="bookish-definition-entry-phrase">{entry.phrase}</strong>: <Format node={Parser.parseFormat($edition, entry.definition)}/>
-                    {#if entry.synonyms && entry.synonyms.length > 0}<span class="bookish-definition-entry-synonyms"><br/><br/>{entry.synonyms.join(", ")}</span>{/if}
-                {/if}
-            </span>
-        </slot>
+        <Text slot="interactor" node={phrase} /><span
+            slot="content"
+            class="bookish-definition-entry"
+            >{#if entry === undefined}<Problem
+                    >Unknown glossary entry "{glossaryID}"</Problem
+                >{:else}<strong class="bookish-definition-entry-phrase"
+                    >{entry.phrase}</strong
+                >: <Format
+                    node={Parser.parseFormat($edition, entry.definition)}
+                />{#if entry.synonyms && entry.synonyms.length > 0}<p
+                        class="synonyms">{entry.synonyms.join(', ')}</p
+                    >{/if}{/if}</span
+        >
     </Marginal>
-</span>
+</span>
+
+<style>
+    .bookish-definition :global(.bookish-marginal-interactor) {
+        border-bottom: 2px solid var(--bookish-link-color);
+    }
+
+    .bookish-definition-entry {
+        display: block;
+        padding-left: 0.75rem;
+        font-size: var(--bookish-small-font-size);
+        line-height: var(--bookish-paragraph-line-height-tight);
+        text-align: left;
+        margin-left: 0.25rem;
+        margin-bottom: 1rem;
+        background: linear-gradient(
+                to right,
+                var(--bookish-link-color) 0px,
+                var(--bookish-link-color) 2px,
+                transparent 2px
+            )
+            no-repeat right;
+    }
+
+    .synonyms {
+        color: var(--bookish-muted-color);
+        font-style: italic;
+        margin-top: var(--bookish-paragraph-spacing);
+    }
+</style>

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 { getCaret, getBook } from '../page/Contexts';
+import Figure from './Figure.svelte';
+import { getContext } from 'svelte';
 export let node;
-export let placeholder = undefined;
+export let editable = false;
+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 editable = isEditable();
-let edition = getEdition();
+let book = getBook();
+// 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">No 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,20 @@
 import { SvelteComponentTyped } from "svelte";
-import type EmbedNode from "../../models/chapter/EmbedNode";
+import type EmbedNode from '../../models/chapter/EmbedNode';
 declare const __propDef: {
     props: {
         node: EmbedNode;
+        editable?: boolean | undefined;
         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, 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>
+
+<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 {};