bookish-press 0.4.0

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        interactor: {};
+        content: {};
+    };
+};
+export declare type MarginalProps = typeof __propDef.props;
+export declare type MarginalEvents = typeof __propDef.events;
+export declare type MarginalSlots = typeof __propDef.slots;
+export default class Marginal extends SvelteComponentTyped<MarginalProps, MarginalEvents, MarginalSlots> {
+}
+export {};

package/components/chapter/Paragraph.svelte

@@ -0,0 +1,15 @@
+<script>import Format from './Format.svelte';
+import { getChapter } from "../page/Contexts";
+export let node;
+export let placeholder = undefined;
+$: level = node.getLevel();
+$: chapter = getChapter();
+$: id = node.getLevel() === 0 || $chapter === undefined ? undefined : "header-" + ($chapter.chapter.getAST()?.getHeaders().indexOf(node) ?? "");
+$: classes = node.getLevel() === 0 ? undefined : "bookish-header" + ($chapter && $chapter.highlightedID === id ? " bookish-content-highlight" : "");
+</script>
+
+{#if level === 0}
+    <p data-nodeid={node.nodeID}><Format node={node.getFormat()} placeholder={placeholder ?? "¶"}/></p>
+{:else}
+    <svelte:element this={`h${level + 1}`} class={classes} id={id} data-nodeid={node.nodeID}><Format node={node.getFormat()} /></svelte:element>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type ParagraphNode from "../../models/chapter/ParagraphNode";
+declare const __propDef: {
+    props: {
+        node: ParagraphNode;
+        placeholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ParagraphProps = typeof __propDef.props;
+export declare type ParagraphEvents = typeof __propDef.events;
+export declare type ParagraphSlots = typeof __propDef.slots;
+export default class Paragraph extends SvelteComponentTyped<ParagraphProps, ParagraphEvents, ParagraphSlots> {
+}
+export {};

package/components/chapter/Python.svelte

@@ -0,0 +1,81 @@
+<script context="module">"use strict";
+</script>
+
+<script>import { afterUpdate, onMount } from "svelte";
+import Code from './Code.svelte';
+export let node;
+export let startCode;
+// Start with whatever code was passed in.
+let code = startCode;
+// What is currently rendered to the console (not always program output).
+let output = "";
+// Whether the runtime is loaded. Initialized based on presence of global.
+let loaded = skulptLoaded();
+let ref = null;
+onMount(() => {
+    // Dynamically load the script to minimize payload and reduce index complexity.
+    if (document.getElementById("skulpt") === null) {
+        let script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.async = true;
+        script.id = 'skulpt';
+        script.onload = () => loaded = true;
+        script.src = "https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js";
+        document.getElementsByTagName('head')[0].appendChild(script);
+    }
+});
+// Always scroll to the bottom of the output.
+afterUpdate(() => {
+    if (ref) {
+        let outputView = ref.querySelector(".bookish-python-output");
+        if (outputView)
+            outputView.scrollTop = outputView.scrollHeight;
+    }
+});
+function skulptLoaded() {
+    return window.hasOwnProperty("Sk");
+}
+function reset() { code = startCode; }
+function handleEdit(newCode) { code = newCode; }
+function handleOutput(out) {
+    // Update the state to re-render.
+    output = out;
+}
+function start() {
+    if (skulptLoaded()) {
+        // Communicate that executing is starting, wait a second, then execute the program.
+        // This is important in case the user wants to run it again; it provides confirmation that it was run again.
+        output = "Executing...";
+        setTimeout(() => execute(), 500);
+    }
+}
+function execute() {
+    // Reset the output, run the code, and update it's output.
+    output = "";
+    if (Sk) {
+        Sk.configure({ output: handleOutput });
+        try {
+            if (Sk)
+                Sk.importMainWithBody("<stdin>", false, code, true);
+        }
+        catch (error) {
+            handleOutput(error);
+        }
+    }
+}
+$: lines = output.split("\n");
+</script>
+
+<div class="bookish-python" bind:this={ref}>
+    <Code inline={false} language={"python"} editable edited={handleEdit} nodeID={node.nodeID}>{code}</Code>
+    <div class="bookish-code-language">{"python"}</div>
+    <div class="bookish-python-controls">
+        <button disabled={startCode === code } on:click={reset}>{"\u21BB"}</button>
+        <button disabled={!loaded} on:click={start}>{"\u25B6\uFE0E"}</button>
+        <div class="bookish-python-output">
+            {#each lines as line, index }
+                <span class="python-output-line">{line}{#if index < lines.length - 1}<br/>{/if}</span>
+            {/each}
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type CodeNode from "../../models/chapter/CodeNode";
+declare const __propDef: {
+    props: {
+        node: CodeNode;
+        startCode: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PythonProps = typeof __propDef.props;
+export declare type PythonEvents = typeof __propDef.events;
+export declare type PythonSlots = typeof __propDef.slots;
+export default class Python extends SvelteComponentTyped<PythonProps, PythonEvents, PythonSlots> {
+}
+export {};

package/components/chapter/Quote.svelte

@@ -0,0 +1,16 @@
+<script>import Block from "./Block.svelte";
+import Format from './Format.svelte';
+import renderPosition from "./renderPosition";
+export let node;
+$: credit = node.getCredit();
+$: position = node.getPosition();
+</script>
+
+<blockquote class={"bookish-blockquote " + renderPosition(position)} data-nodeid={node.nodeID}>
+    {#each node.getBlocks() as element}
+        <Block node={element}/>
+    {/each}
+    {#if credit}
+        <div class="bookish-blockquote-caption"><span><Format node={credit} placeholder="credit"/></span></div>
+    {/if}
+</blockquote>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type QuoteNode from "../../models/chapter/QuoteNode";
+declare const __propDef: {
+    props: {
+        node: QuoteNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type QuoteProps = typeof __propDef.props;
+export declare type QuoteEvents = typeof __propDef.events;
+export declare type QuoteSlots = typeof __propDef.slots;
+export default class Quote extends SvelteComponentTyped<QuoteProps, QuoteEvents, QuoteSlots> {
+}
+export {};

package/components/chapter/Rule.svelte

@@ -0,0 +1,4 @@
+<script>export let node;
+</script>
+
+<hr data-nodeid={node.nodeID}/>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type RuleNode from "../../models/chapter/RuleNode";
+declare const __propDef: {
+    props: {
+        node: RuleNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RuleProps = typeof __propDef.props;
+export declare type RuleEvents = typeof __propDef.events;
+export declare type RuleSlots = typeof __propDef.slots;
+export default class Rule extends SvelteComponentTyped<RuleProps, RuleEvents, RuleSlots> {
+}
+export {};

package/components/chapter/Table.svelte

@@ -0,0 +1,29 @@
+<script>import Format from './Format.svelte';
+import renderPosition from "./renderPosition";
+export let node;
+$: rows = node.getRows();
+$: caption = node.getCaption();
+</script>
+
+<div class={"bookish-figure " + renderPosition(node.getPosition())} data-nodeid={node.nodeID}>
+    <div class="bookish-table">
+        <table>
+            <tbody>
+            {#each rows as row }
+                <tr>
+                    {#if row.length === 1 }
+                        <td colspan={rows.reduce((max, row) => Math.max(row.length, max), 0)}><Format node={row[0]}/></td>
+                    {:else}
+                        {#each row as cell }
+                            <td><Format node={cell}/></td>
+                        {/each}
+                    {/if}
+                </tr>
+            {/each}
+            </tbody>
+        </table>
+    </div>
+    {#if caption !== undefined}
+        <div class="bookish-figure-caption"><Format node={caption} placeholder="caption"/></div>
+    {/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type TableNode from "../../models/chapter/TableNode";
+declare const __propDef: {
+    props: {
+        node: TableNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableProps = typeof __propDef.props;
+export declare type TableEvents = typeof __propDef.events;
+export declare type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/components/chapter/Text.svelte

@@ -0,0 +1,62 @@
+<script>import { getChapter } from "../page/Contexts";
+export let node;
+$: text = node.getText();
+let context = getChapter();
+function replaceMultipleSpacesWithNonBreakingSpaces(original) {
+    let revisedText = "";
+    for (let i = 0; i < original.length; i++) {
+        // If its a space and its at the beginning, the end, or the previous character was a space, make it a non-breaking space.
+        let c = original.charAt(i);
+        if (c === " " && (i === 0 || i === original.length - 1 || original.charAt(i - 1) === " "))
+            revisedText += "\u00a0";
+        else
+            revisedText += c;
+    }
+    return revisedText;
+}
+// Compute highlights, if highlighted
+let segments = undefined;
+$: {
+    // Replace any spaces at the beginning or end of the string with explicit non-breaking spaces to ensure that they render.
+    text = replaceMultipleSpacesWithNonBreakingSpaces(text);
+    // If the text ends with a newline, render a non-breaking space at the end.
+    if (text.length > 0 && text.charAt(text.length - 1) === "\n")
+        text = text + "\ufeff";
+    // If there's no text, render a non-breaking space.
+    if (text.length === 0)
+        text = "\ufeff";
+    // Is there a query we're supposed to highlight? If so, highlight it.
+    if ($context && $context.highlightedWord) {
+        const query = $context.highlightedWord;
+        const lowerText = text.toLowerCase();
+        // Does this text contain the query? Highlight it.
+        if (lowerText.indexOf(query) >= 0) {
+            // Find all the matches
+            const indices = [];
+            for (let i = 0; i < text.length; ++i) {
+                if (lowerText.substring(i, i + query.length) === query) {
+                    indices.push(i);
+                }
+            }
+            // Go through each one and construct contents for the span to return.
+            segments = [];
+            for (let i = 0; i < indices.length; i++) {
+                // Push the text from the end of the last match or the start of the string.
+                segments.push([text.substring(i === 0 ? 0 : indices[i - 1] + query.length, indices[i]), false]);
+                segments.push([text.substring(indices[i], indices[i] + query.length), true]);
+            }
+            if (indices[indices.length - 1] < text.length - 1)
+                segments.push([text.substring(indices[indices.length - 1] + query.length, text.length), false]);
+        }
+    }
+}
+</script>
+
+
+{#if segments }
+    {#each segments as segment }
+        <span class={`bookish-text ${segment[1] ? "bookish-content-highlight" : ""}`}>{segment[0]}</span>
+    {/each}
+{:else}
+    <span class={"bookish-text"} data-nodeid={node.nodeID}>{text}</span>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type TextNode from "../../models/chapter/TextNode";
+declare const __propDef: {
+    props: {
+        node: TextNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TextProps = typeof __propDef.props;
+export declare type TextEvents = typeof __propDef.events;
+export declare type TextSlots = typeof __propDef.slots;
+export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
+}
+export {};

package/components/chapter/renderPosition.d.ts

@@ -0,0 +1,3 @@
+import type Position from "../../models/chapter/Position";
+declare const renderPosition: (position: Position) => "" | "bookish-marginal-left-inset" | "bookish-marginal-right-inset";
+export default renderPosition;

package/components/chapter/renderPosition.js

@@ -0,0 +1,4 @@
+const renderPosition = (position) => position === "<" ? "bookish-marginal-left-inset" :
+    position === ">" ? "bookish-marginal-right-inset" :
+        "";
+export default renderPosition;