bookish-press 0.4.0 → 0.4.3

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type CodeNode from "../../models/chapter/CodeNode";
+import type CodeNode from '../../models/chapter/CodeNode';
 declare const __propDef: {
     props: {
         node: CodeNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CaptionedCodeProps = typeof __propDef.props;
-export declare type CaptionedCodeEvents = typeof __propDef.events;
-export declare type CaptionedCodeSlots = typeof __propDef.slots;
+export type CaptionedCodeProps = typeof __propDef.props;
+export type CaptionedCodeEvents = typeof __propDef.events;
+export type CaptionedCodeSlots = typeof __propDef.slots;
 export default class CaptionedCode extends SvelteComponentTyped<CaptionedCodeProps, CaptionedCodeEvents, CaptionedCodeSlots> {
 }
 export {};

package/components/chapter/ChapterBody.svelte

@@ -1,23 +1,76 @@
+<svelte:options immutable />
+
 <script>import ParagraphNode from '../../models/chapter/ParagraphNode';
-import Block from "./Block.svelte";
+import Block from './Block.svelte';
 import Paragraph from './Paragraph.svelte';
+import Problem from './Problem.svelte';
 export let node;
-export let placeholder = "";
+export let placeholder = '';
+export let editable = false;
 $: errors = node.getErrors();
 $: blocks = node.getBlocks();
 </script>
 
-<div class="bookish-chapter-body" data-nodeid={node.nodeID}>
-    {#if errors.length > 0 }
+<section class="bookish-chapter-body" data-nodeid={node.nodeID}>
+    {#if editable && errors.length > 0}
         <p>
-            <span class="bookish-error">{errors.length + " " + (errors.length > 1 ? "errors" : "error")} below</span>
+            <Problem
+                >{errors.length +
+                    ' ' +
+                    (errors.length > 1 ? 'errors' : 'error')} below</Problem
+            >
         </p>
     {/if}
-    {#if blocks.length === 1 && blocks[0] instanceof ParagraphNode && blocks[0].getFormat().isEmptyText() }
-        <Paragraph node={blocks[0]} placeholder={placeholder} />
+    {#if blocks.length === 1 && blocks[0] instanceof ParagraphNode && blocks[0]
+            .getFormat()
+            .isEmptyText()}
+        <Paragraph node={blocks[0]} {placeholder} />
     {:else}
-        {#each node.getBlocks() as block }
+        {#each node.getBlocks() as block (block.nodeID)}
             <Block node={block} />
         {/each}
     {/if}
-</div>
+</section>
+
+<style>
+    /* This accounts for completely empty chapters. */
+    .bookish-chapter-body {
+        min-height: 2em;
+        min-width: 100%;
+    }
+
+    /* This implements a drop cap in the first letter of the first text in the first format of the first paragraph of a chapter (but only chapters). */
+    :global(
+            .chapter-content
+                .bookish-chapter-body
+                p:first-of-type:not(.placeholder)::first-letter
+        ) {
+        padding: 0 0.25rem;
+        margin: 0 0.25rem 0 0;
+        font-size: 4rem;
+        font-weight: 700;
+        float: left;
+        line-height: 1;
+        color: var(--bookish-paragraph-color);
+    }
+
+    :global(.bookish-content-highlight) {
+        position: relative;
+    }
+
+    /* A rectangular highlight like a highlighter marker over highlighted text */
+    :global(.bookish-content-highlight:before) {
+        content: '';
+        z-index: -1;
+        left: -0.25em;
+        top: -0.5em;
+        position: absolute;
+        width: 100%;
+        height: 2em;
+        opacity: 0.7;
+        padding: 0.1em 0.25em;
+        transform: skew(-10deg);
+        background-color: var(--bookish-highlight-color);
+        filter: url(#marker);
+    }
+</style>

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

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

package/components/chapter/Citations.svelte

@@ -1,5 +1,8 @@
+<svelte:options immutable={true} />
+
 <script>import Marginal from './Marginal.svelte';
 import Parser from '../../models/chapter/Parser';
+import Problem from './Problem.svelte';
 import Atom from './Atom.svelte';
 import { getChapter, getEdition } from '../page/Contexts';
 import PossibleReference from '../page/PossibleReference.svelte';
@@ -7,13 +10,14 @@ import { afterUpdate } from 'svelte';
 export let node;
 let chapter = getChapter();
 let edition = getEdition();
-$: chapterNode = $chapter?.chapter.getAST();
+$: ast =
+    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
 // Sort citations numerically, however they're numbered.
 $: citations = node.getMeta().sort((a, b) => {
-    if (chapterNode === undefined)
+    if (ast === undefined)
         return 0;
-    let aNumber = chapterNode.getCitationNumber(a);
-    let bNumber = chapterNode.getCitationNumber(b);
+    let aNumber = ast.getCitationNumber(a);
+    let bNumber = ast.getCitationNumber(b);
     if (aNumber === null) {
         if (bNumber === null)
             return 0;
@@ -32,30 +36,45 @@ afterUpdate(() => $chapter?.layoutMarginals());
 </script>
 
 <Atom {node}>
-    {#if chapterNode }
-        <span class="bookish-citation"  data-nodeid={node.nodeID}>
-            <Marginal id={"citation-" + citations.join("-")}>
+    {#if ast}
+        <span class="bookish-citation" data-nodeid={node.nodeID}>
+            <Marginal
+                {node}
+                id={'citation-' + citations.join('-')}
+                label="citations"
+            >
                 <svelte:fragment slot="interactor">
                     {#each citations as citationID, index}
-                        {@const citationNumber = chapterNode?.getCitationNumber(citationID) }
-                        {#if citationNumber && citationID in $edition.getReferences()}
-                            <sup class="bookish-citation-symbol">{citationNumber}</sup>
+                        {@const citationNumber =
+                            ast?.getCitationNumber(citationID)}
+                        {#if citationNumber && citationID in ($edition?.getReferences() ?? {})}
+                            <sup class="bookish-citation-symbol"
+                                >{citationNumber}</sup
+                            >
                         {:else}
-                            <span class="bookish-error">Unknown reference: <code>{citationID}</code></span>
+                            <Problem
+                                >Unknown reference: <code>{citationID}</code
+                                ></Problem
+                            >
                         {/if}
-                        {#if citations.length > 1 && index < citations.length - 1 }<sup>,</sup>{/if}
+                        {#if citations.length > 1 && index < citations.length - 1}<sup
+                                >,</sup
+                            >{/if}
                     {:else}
-                        <sup class="bookish-citation-symbol">{"\u2014"}</sup>            
+                        <sup class="bookish-citation-symbol">{'\u2014'}</sup>
                     {/each}
                 </svelte:fragment>
                 <span slot="content" class="bookish-references">
-                    {#each citations as citationID }
-                        {@const citationNumber = chapterNode?.getCitationNumber(citationID) }
-                        {@const ref = $edition.getReference(citationID) }
-                        {#if citationNumber && ref }
+                    {#each citations as citationID}
+                        {@const citationNumber =
+                            ast?.getCitationNumber(citationID)}
+                        {@const ref = $edition?.getReference(citationID)}
+                        {#if citationNumber && ref && $edition}
                             <span class="bookish-reference">
-                                <sup class="bookish-citation-symbol">{citationNumber}</sup>
-                                <PossibleReference node={Parser.parseReference(citationID, ref, $edition, true)}/>
+                                <sup class="bookish-citation-symbol"
+                                    >{citationNumber}</sup
+                                >
+                                <PossibleReference node={ref} />
                             </span>
                         {/if}
                     {/each}
@@ -63,4 +82,51 @@ afterUpdate(() => $chapter?.layoutMarginals());
             </Marginal>
         </span>
     {/if}
-</Atom>
+</Atom>
+
+<style>
+    .bookish-reference {
+        font-family: var(--bookish-paragraph-font-family);
+        list-style-position: outside;
+    }
+
+    :global(ol li.bookish-reference::before) {
+        color: var(--bookish-paragraph-color);
+    }
+
+    :global(.bookish-marginal) .bookish-reference {
+        font-size: var(--bookish-small-font-size);
+        font-style: normal;
+        color: var(--bookish-paragraph-color);
+    }
+
+    /* This enables us to layout the numbers and letters in a neat right-aligned floating grid. */
+    .bookish-reference {
+        position: relative;
+    }
+
+    .bookish-references .bookish-reference {
+        display: block;
+        line-height: var(--bookish-paragraph-line-height-tight);
+        margin-left: 1rem;
+        margin-bottom: 1rem;
+        text-align: left;
+    }
+
+    .bookish-citation-symbol {
+        font-family: var(--bookish-paragraph-font-family);
+        font-weight: normal;
+        color: var(--bookish-link-color);
+        position: relative;
+    }
+
+    .bookish-reference .bookish-citation-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/Citations.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type CitationsNode from "../../models/chapter/CitationsNode";
+import type CitationsNode from '../../models/chapter/CitationsNode';
 declare const __propDef: {
     props: {
         node: CitationsNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CitationsProps = typeof __propDef.props;
-export declare type CitationsEvents = typeof __propDef.events;
-export declare type CitationsSlots = typeof __propDef.slots;
+export type CitationsProps = typeof __propDef.props;
+export type CitationsEvents = typeof __propDef.events;
+export type CitationsSlots = typeof __propDef.slots;
 export default class Citations extends SvelteComponentTyped<CitationsProps, CitationsEvents, CitationsSlots> {
 }
 export {};

package/components/chapter/Code.svelte

@@ -1,35 +1,166 @@
-<script>import hljs from 'highlight.js';
-import { onMount } from 'svelte';
-// Suppress unescaped HTML warning, trusting the escaping of the parser.
-hljs.configure({ ignoreUnescapedHTML: true });
+<svelte:options immutable={true} />
+
+<script>import { afterUpdate } from 'svelte';
+import Prism from './ExtendedPrism';
 export let editable;
 export let inline;
 export let nodeID;
 export let edited = undefined;
 export let language = undefined;
-let el = null;
-// Find any code tags inside and highlight them.
-function highlightCode() {
-    if (el)
-        hljs.highlightElement(el);
-}
+let element = null;
 // When the component mounts or updates, highlight the code inside.
-onMount(() => {
-    highlightCode();
+afterUpdate(() => {
+    if (element) {
+        Prism.highlightElement(element);
+    }
 });
 function handleChange() {
-    if (el && edited)
-        edited(el.innerText);
+    if (element && edited)
+        edited(element.innerText);
 }
-// There's no way to mute highlightjs warnings on missing languages, so we check here.
-$: lang = language ? (hljs.getLanguage(language) === undefined ? "text" : language) : "plaintext";
 </script>
 
-<code 
+<code
     data-nodeid={nodeID}
+    bind:this={element}
     contenteditable={editable}
-    class={`bookish-code ${inline ? "bookish-code-inline" : "bookish-code-block"} ${"language-" + lang}`} 
+    class={`bookish-code ${
+        inline ? 'bookish-code-inline' : 'bookish-code-block'
+    } ${language ? `language-${language}` : ''}`}
     on:blur={handleChange}
-    bind:this={el}>
-        <slot></slot>
-</code>
+>
+    <slot />
+</code>
+
+<style global>
+    :global(.bookish-code) {
+        font-family: var(--bookish-code-font-family);
+        font-weight: var(--bookish-code-font-weight);
+        font-size: var(--bookish-code-font-size);
+        border: 1px solid var(--bookish-border-color-light);
+        color: var(--bookish-muted-color);
+        background-color: var(--bookish-block-background-color);
+        clear: both;
+        overflow-x: scroll;
+    }
+
+    :global(code) {
+        font-family: var(--bookish-code-font-family);
+        font-weight: var(--bookish-code-font-weight);
+        font-size: var(--bookish-code-font-size);
+    }
+
+    :global(.bookish-code-block) {
+        display: block;
+        padding: var(--bookish-block-padding);
+        line-height: var(--bookish-paragraph-line-height-tight);
+        border-radius: var(--bookish-roundedness);
+    }
+
+    :global(.bookish-code-inline) {
+        display: inline;
+        padding: calc(1.5 * var(--bookish-inline-padding))
+            var(--bookish-inline-padding);
+    }
+
+    :global(.bookish-code-inline) :global(code) {
+        display: inline;
+        padding: 0em;
+    }
+
+    /* PrismJS 1.29.0
+    https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+python */
+    /**
+    * prism.js default theme for JavaScript, CSS and HTML
+    * Based on dabblet (http://dabblet.com)
+    * @author Lea Verou
+    */
+
+    :global(code[class*='language-']) {
+        color: black;
+        background: none;
+        font-family: var(--bookish-code-font-family);
+        font-size: 1em;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        word-wrap: normal;
+        line-height: 1.5;
+
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+    }
+
+    :global(.token.comment),
+    :global(.token.prolog),
+    :global(.token.doctype),
+    :global(.token.cdata) {
+        color: var(--bookish-comment-color);
+    }
+
+    :global(.token.punctuation) {
+        color: var(--bookish-muted-color);
+    }
+
+    :global(.token.namespace) {
+        opacity: 0.7;
+    }
+
+    :global(.token.property),
+    :global(.token.tag),
+    :global(.token.boolean),
+    :global(.token.number),
+    :global(.token.constant),
+    :global(.token.symbol),
+    :global(.token.deleted) {
+        color: var(--bookish-error-color);
+    }
+
+    :global(.token.selector),
+    :global(.token.attr-name),
+    :global(.token.string),
+    :global(.token.char),
+    :global(.token.builtin),
+    :global(.token.inserted) {
+        color: var(--bookish-pragraph-color);
+    }
+
+    :global(.token.operator),
+    :global(.token.entity),
+    :global(.token.url) {
+        color: var(--bookish-bullet-color);
+    }
+
+    :global(.token.atrule),
+    :global(.token.attr-value),
+    :global(.token.keyword) {
+        color: var(--bookish-link-color);
+    }
+
+    :global(.token.regex),
+    :global(.token.important),
+    :global(.token.variable),
+    :global(.token.function),
+    :global(.token.class-name) {
+        color: var(--bookish-highlight-color);
+    }
+
+    :global(.token.important),
+    :global(.token.bold) {
+        font-weight: bold;
+    }
+    :global(.token.italic) {
+        font-style: italic;
+    }
+
+    :global(.token.entity) {
+        cursor: help;
+    }
+</style>

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

@@ -14,9 +14,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type CodeProps = typeof __propDef.props;
-export declare type CodeEvents = typeof __propDef.events;
-export declare type CodeSlots = typeof __propDef.slots;
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
 export default class Code extends SvelteComponentTyped<CodeProps, CodeEvents, CodeSlots> {
 }
 export {};

package/components/chapter/Comment.svelte

@@ -1,28 +1,45 @@
+<svelte:options immutable={true} />
+
 <script>import Atom from './Atom.svelte';
 import Marginal from './Marginal.svelte';
 import Format from './Format.svelte';
-import { getChapter, isEditable } from '../page/Contexts';
-import { getCaret } from '../page/Contexts';
+import { getChapter, isChapterEditable, getCaret, getEdition, } from '../page/Contexts';
 import { afterUpdate } from 'svelte';
-import ToolbarIcon from '../editor/ToolbarIcon.svelte';
+import Icon from '../editor/Icon.svelte';
+import CommentIcon from '../editor/icons/comment.svg?raw';
 export let node;
 let chapter = getChapter();
-let editable = isEditable();
+let edition = getEdition();
+let editable = isChapterEditable();
 let caret = getCaret();
-$: chapterNode = $chapter?.chapter.getAST();
-$: focused = $caret && $caret.range && node.contains($caret.range.start.node);
+$: 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}>
     {#if editable}
-        <Marginal id={"comment-" + (chapterNode === undefined ? "?" : chapterNode.getComments().indexOf(node))}>
+        <Marginal
+            {node}
+            id={'comment-' +
+                (chapterNode === undefined
+                    ? '?'
+                    : chapterNode.getComments().indexOf(node))}
+            label="comment, escape to edit"
+        >
             <span slot="interactor" class="bookish-comment-symbol">
-                <ToolbarIcon name="comment.svg"/>
+                <Icon icon={CommentIcon} />
             </span>
-            <span slot="content" class={`bookish-app-comment ${focused ? "bookish-app-comment-focused" : ""}`}>
-                <Format node={node.getMeta()} placeholder="comment"/>
+            <span
+                slot="content"
+                class={`bookish-app-comment ${
+                    focused ? 'bookish-app-comment-focused' : ''
+                }`}
+            >
+                <Format node={node.getMeta()} placeholder="comment" />
             </span>
         </Marginal>
     {/if}
@@ -30,17 +47,22 @@ afterUpdate(() => $chapter?.layoutMarginals());
 
 <style>
     .bookish-app-comment {
-        background: var(--bookish-app-chrome-background);
-        border: var(--bookish-app-chrome-border-width) solid var(--bookish-app-chrome-border-color);
-        border-radius: 0 var(--bookish-app-chrome-padding) var(--bookish-app-chrome-padding) var(--bookish-app-chrome-padding);
-        padding: var(--bookish-app-chrome-padding);
-        font-size: var(--bookish-app-chrome-font-size);
+        background: var(--app-chrome-background);
+        border: var(--app-chrome-border-size) solid var(--app-border-color);
+        border-radius: 0 var(--app-chrome-padding) var(--app-chrome-padding)
+            var(--app-chrome-padding);
+        padding: var(--app-chrome-padding);
+        font-size: var(--app-chrome-font-size);
         display: inline-block;
         line-height: 1.5em;
     }
 
-    .bookish-app-comment-focused, .bookish-footnote-focused {
+    .bookish-app-comment-focused,
+    .bookish-footnote-focused {
         outline: 2px solid var(--bookish-highlight-color);
     }
 
-</style>
+    .bookish-comment-symbol {
+        position: relative;
+    }
+</style>

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

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CommentProps = typeof __propDef.props;
-export declare type CommentEvents = typeof __propDef.events;
-export declare type CommentSlots = typeof __propDef.slots;
+export type CommentProps = typeof __propDef.props;
+export type CommentEvents = typeof __propDef.events;
+export type CommentSlots = typeof __propDef.slots;
 export default class Comment extends SvelteComponentTyped<CommentProps, CommentEvents, CommentSlots> {
 }
 export {};