bookish-press 0.4.1 → 0.4.3

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>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type FootnoteNode from "../../models/chapter/FootnoteNode";
+import type FootnoteNode from '../../models/chapter/FootnoteNode';
 declare const __propDef: {
     props: {
         node: FootnoteNode;
@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FootnoteProps = typeof __propDef.props;
-export declare type FootnoteEvents = typeof __propDef.events;
-export declare type FootnoteSlots = typeof __propDef.slots;
+export type FootnoteProps = typeof __propDef.props;
+export type FootnoteEvents = typeof __propDef.events;
+export type FootnoteSlots = typeof __propDef.slots;
 export default class Footnote extends SvelteComponentTyped<FootnoteProps, FootnoteEvents, FootnoteSlots> {
 }
 export {};

package/components/chapter/Format.svelte

@@ -1,57 +1,82 @@
-<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 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 { isEditable } from "../page/Contexts";
+<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;
-let editable = isEditable();
 $: format = node.getFormat();
 $: tag =
-    format === "*" ? "strong" :
-        format === "_" ? "em" :
-            format === "^" ? "sup" :
-                format === "v" ? "sub" :
-                    "span";
-$: showPlaceholder = node.isEmptyText() && placeholder !== undefined && editable;
+    format === '*'
+        ? 'strong'
+        : format === '_'
+            ? 'em'
+            : format === '^'
+                ? 'sup'
+                : format === 'v'
+                    ? 'sub'
+                    : 'span';
+$: showPlaceholder =
+    node.isEmptyText() &&
+        placeholder !== undefined &&
+        (editable || isChapterEditable());
 </script>
 
-<svelte:element this={tag} data-nodeid={node.nodeID} class={showPlaceholder ? "bookish-editor-placeholder" : ""}>
-    {#each node.getSegments() as segment}
-        {#if segment instanceof TextNode}<Text node={segment} />
-        {:else if segment instanceof InlineCodeNode}<InlineCode node={segment} />
+<svelte:element
+    this={tag}
+    data-nodeid={node.nodeID}
+    class={`format ${showPlaceholder ? 'bookish-editor-placeholder' : ''}`}
+>
+    {#each node.getSegments() as segment (segment.nodeID)}
+        {#if segment instanceof TextNode}<Text
+                node={segment}
+                placeholder={node.getSegments().length === 1
+                    ? placeholder
+                    : undefined}
+            />
+        {:else if segment instanceof InlineCodeNode}<InlineCode
+                node={segment}
+            />
         {:else if segment instanceof LinkNode}<Link node={segment} />
         {:else if segment instanceof CitationsNode}<Citations node={segment} />
-        {:else if segment instanceof DefinitionNode}<Definition node={segment} />
+        {:else if segment instanceof DefinitionNode}<Definition
+                node={segment}
+            />
         {:else if segment instanceof FootnoteNode}<Footnote node={segment} />
         {:else if segment instanceof LabelNode}<Label node={segment} />
         {:else if segment instanceof CommentNode}<Comment node={segment} />
         {:else if segment instanceof FormatNode}<Format node={segment} />
-        {:else}<span class="bookish-error">Unknown segment type node={segment}</span>
+        {:else}<Problem>Unknown segment type node={segment}</Problem>
         {/if}
     {/each}
-    {#if showPlaceholder }
-        { placeholder }
-    {/if}
 </svelte:element>
 
 <style>
     .bookish-editor-placeholder {
-        color: var(--bookish-app-chrome-muted);
+        color: var(--app-muted-color);
         font-style: italic;
-    }    
-</style>
+    }
+
+    strong,
+    b {
+        font-weight: var(--bookish-bold-font-weight);
+    }
+</style>

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

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import FormatNode from "../../models/chapter/FormatNode";
+import FormatNode from '../../models/chapter/FormatNode';
 declare const __propDef: {
     props: {
         node: FormatNode;
+        editable?: boolean | undefined;
         placeholder?: string | undefined;
     };
     events: {
@@ -10,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FormatProps = typeof __propDef.props;
-export declare type FormatEvents = typeof __propDef.events;
-export declare type FormatSlots = typeof __propDef.slots;
+export type FormatProps = typeof __propDef.props;
+export type FormatEvents = typeof __propDef.events;
+export type FormatSlots = typeof __propDef.slots;
 export default class Format extends SvelteComponentTyped<FormatProps, FormatEvents, FormatSlots> {
 }
 export {};

package/components/chapter/InlineCode.svelte

@@ -1,12 +1,22 @@
-<script>import { isEditable } from "../page/Contexts";
+<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 = isEditable();
+let editable = isChapterEditable();
 </script>
 
-{#if editable }
-    <span class="bookish-code bookish-code-inline hljs" data-nodeid={node.nodeID}><Text node={node.getText()}/></span>
+{#if editable}
+    <span
+        class="bookish-code bookish-code-inline hljs"
+        data-nodeid={node.nodeID}><Text node={node.getText()} /></span
+    >
 {:else}
-    <Code editable={false} inline={true} language={node.getMeta()} nodeID={node.getText().nodeID}>{node.getText().getText()}</Code>
-{/if}
+    <Code
+        editable={false}
+        inline={true}
+        language={node.getMeta()}
+        nodeID={node.getText().nodeID}>{node.getText().getText()}</Code
+    >
+{/if}

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type InlineCodeNode from "../../models/chapter/InlineCodeNode";
+import type InlineCodeNode from '../../models/chapter/InlineCodeNode';
 declare const __propDef: {
     props: {
         node: InlineCodeNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InlineCodeProps = typeof __propDef.props;
-export declare type InlineCodeEvents = typeof __propDef.events;
-export declare type InlineCodeSlots = typeof __propDef.slots;
+export type InlineCodeProps = typeof __propDef.props;
+export type InlineCodeEvents = typeof __propDef.events;
+export type InlineCodeSlots = typeof __propDef.slots;
 export default class InlineCode extends SvelteComponentTyped<InlineCodeProps, InlineCodeEvents, InlineCodeSlots> {
 }
 export {};

package/components/chapter/Label.svelte

@@ -1,20 +1,49 @@
+<svelte:options immutable={true} />
+
 <script>import Atom from './Atom.svelte';
-import { getChapter, isEditable } from "../page/Contexts";
+import { getChapter, getEdition, isChapterEditable, } from '../page/Contexts';
+import Problem from './Problem.svelte';
 export let node;
-let editable = isEditable();
+let editable = isChapterEditable();
 let chapter = getChapter();
-$: ast = $chapter?.chapter.getAST();
-$: duplicate = ast === undefined ? false : ast.getLabels().filter(l => l.getMeta() === node.getMeta()).length > 1;
+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={node}>
-    <span 
-        class={"bookish-label" + ($chapter?.highlightedID === node.getMeta() ? " bookish-content-highlight" : "")} 
+<Atom {node}>
+    <span
+        class={'bookish-label' +
+            ($chapter?.highlightedID === node.getMeta()
+                ? ' bookish-content-highlight'
+                : '')}
         id={node.getMeta()}
         data-nodeid={node.nodeID}
     >
         {#if editable}
-            <span class={`${duplicate ? "bookish-error" : ""}`}>•<code>{node.getMeta()}</code></span>
+            {#if duplicate}
+                <Problem>Duplicate label {node.getMeta()}</Problem>
+            {:else}
+                <span>•<code>{node.getMeta()}</code></span>
+            {/if}
         {/if}
     </span>
-</Atom>
+</Atom>
+
+<style>
+    /* A little circle at the point of the annotation */
+    .bookish-label.bookish-content-highlight {
+        display: inline-block;
+        width: 3em;
+        height: 3em;
+        border-radius: 3em;
+        position: absolute;
+        z-index: -1;
+        margin-left: -1em;
+    }
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type LabelNode from "../../models/chapter/LabelNode";
+import type LabelNode from '../../models/chapter/LabelNode';
 declare const __propDef: {
     props: {
         node: LabelNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LabelProps = typeof __propDef.props;
-export declare type LabelEvents = typeof __propDef.events;
-export declare type LabelSlots = typeof __propDef.slots;
+export type LabelProps = typeof __propDef.props;
+export type LabelEvents = typeof __propDef.events;
+export type LabelSlots = typeof __propDef.slots;
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
 }
 export {};

package/components/chapter/Link.svelte

@@ -1,21 +1,24 @@
-<script>import { getBase, getEdition, isEditable } from "../page/Contexts";
+<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 = isEditable();
+let editable = isChapterEditable();
 let edition = getEdition();
 $: url = node.getMeta();
 $: content = node.getText();
 function isInvalidChapterLink() {
     // If it's internal, validate it.
-    if (!url.startsWith("http")) {
+    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(":");
+        if (url.indexOf(':') >= 0) {
+            let parts = chapter.split(':');
             chapter = parts[0];
         }
-        if (chapter !== "" && !$edition.hasChapter(chapter))
+        if (chapter !== '' && !$edition?.hasChapter(chapter))
             return true;
     }
     return false;
@@ -24,23 +27,25 @@ function isInvalidChapterLink() {
 
 {#if editable}
     <span class="bookish-editor-link"><Text node={content} /></span>
-<!-- If this is an invalid chapter link, say so -->
+    <!-- If this is an invalid chapter link, say so -->
 {:else if isInvalidChapterLink()}
-    <span class="bookish-error">Unknown chapter name reference '{url}'</span>
-<!-- If this is external link, make an anchor that opens a new window. -->
-{:else if url.startsWith("http")}
+    <Problem>Unknown chapter name reference '{url}'</Problem>
+    <!-- If this is external link, make an anchor that opens a new window. -->
+{:else if url.startsWith('http')}
     <a href={url} target="_blank" rel="noreferrer"><Text node={content} /></a>
-<!-- If's a chapter link with a label -->
-{:else if url.indexOf(":") >= 0}
+    <!-- If's a chapter link with a label -->
+{:else if url.indexOf(':') >= 0}
     <!-- If the chapter isn't specified, set to the current chapter's id. -->
-    {#if url.split(":")[0] === ""}
-        <a href={"#" + url.split(":")[1]}><Text node={content} /></a>
+    {#if url.split(':')[0] === ''}
+        <a href={'#' + url.split(':')[1]}><Text node={content} /></a>
     {:else}
-        <a href={"/" + url.split(":")[0] + "#" + url.split(":")[1]}><Text node={content} /></a>
+        <a href={'/' + url.split(':')[0] + '#' + url.split(':')[1]}
+            ><Text node={content} /></a
+        >
     {/if}
-<!-- If this is internal link, make a route link to the chapter. -->
-{:else}       
-    <a href={base + "/" + url}><Text node={content} /></a>
+    <!-- If this is internal link, make a route link to the chapter. -->
+{:else}
+    <a href={$base + '/' + url}><Text node={content} /></a>
 {/if}
 
 <style>
@@ -48,4 +53,4 @@ function isInvalidChapterLink() {
         color: var(--bookish-link-color);
         font-weight: var(--bookish-link-font-weight);
     }
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type LinkNode from "../../models/chapter/LinkNode";
+import type LinkNode from '../../models/chapter/LinkNode';
 declare const __propDef: {
     props: {
         node: LinkNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LinkProps = typeof __propDef.props;
-export declare type LinkEvents = typeof __propDef.events;
-export declare type LinkSlots = typeof __propDef.slots;
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
 export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
 }
 export {};

package/components/chapter/List.svelte

@@ -1,14 +1,81 @@
-<script>import ListNode from "../../models/chapter/ListNode";
-import Format from "./Format.svelte";
+<svelte:options immutable={true} />
+
+<script>import ListNode from '../../models/chapter/ListNode';
+import Format from './Format.svelte';
 export let node;
 </script>
 
-<svelte:element this={node.isNumbered() ? "ol" : "ul"} data-nodeid={node.nodeID}>
-    {#each node.getItems() as item }
-        {#if item instanceof ListNode }
-            <svelte:self node={item}/>
+<svelte:element
+    this={node.isNumbered() ? 'ol' : 'ul'}
+    data-nodeid={node.nodeID}
+>
+    {#each node.getItems() as item (item.nodeID)}
+        {#if item instanceof ListNode}
+            <svelte:self node={item} />
         {:else}
-            <li><Format node={item}/></li>
+            <li><Format node={item} /></li>
         {/if}
     {/each}
-</svelte:element>
+</svelte:element>
+
+<style>
+    ol {
+        list-style: none;
+        counter-reset: item;
+    }
+
+    ol > li {
+        counter-increment: item;
+    }
+
+    ol > li {
+        list-style-type: none;
+    }
+
+    ol > :global(ol > li) {
+        list-style-type: none;
+    }
+
+    ol > :global(ol > ol > li) {
+        list-style-type: none;
+    }
+
+    ol > :global(li::before),
+    ul > :global(ol > li::before),
+    ul > :global(ul > ol > li::before) {
+        content: counter(item) '. ';
+        color: var(--bookish-bullet-color);
+        display: inline-block;
+        width: 1em;
+        margin-left: -1.5rem;
+        margin-right: 0.5rem;
+        text-align: right;
+    }
+
+    ol > :global(ol > li::before),
+    ul > :global(ol > ol > li::before) {
+        content: counter(item, lower-alpha) '. ';
+    }
+
+    ol > :global(ol > ol > li:before) {
+        content: counter(item, upper-alpha) '. ';
+    }
+
+    li {
+        margin-bottom: calc(0.5 * var(--bookish-paragraph-spacing));
+    }
+
+    ul li {
+        list-style: none;
+    }
+
+    ul li::before {
+        content: '*';
+        color: var(--bookish-bullet-color);
+        display: inline-block;
+        width: 1rem;
+        margin-left: -1rem;
+        font-family: var(--bookish-bullet-font-family);
+        font-weight: var(--bookish-bullet-font-weight);
+    }
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import ListNode from "../../models/chapter/ListNode";
+import ListNode from '../../models/chapter/ListNode';
 declare const __propDef: {
     props: {
         node: ListNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ListProps = typeof __propDef.props;
-export declare type ListEvents = typeof __propDef.events;
-export declare type ListSlots = typeof __propDef.slots;
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
 export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
 }
 export {};