bookish-press 0.4.46 → 0.4.47

package/{components → src/lib/components}/chapter/List.svelte

@@ -1,8 +1,10 @@
 <svelte:options immutable={true} />
 
-<script>import ListNode from '../../models/chapter/ListNode';
-import Format from './Format.svelte';
-export let node;
+<script lang="ts">
+    import ListNode from '$lib/models/chapter/ListNode';
+    import Format from './Format.svelte';
+
+    export let node: ListNode;
 </script>
 
 <svelte:element

package/{components → src/lib/components}/chapter/Marginal.svelte

@@ -1,47 +1,60 @@
 <svelte:options immutable={true} />
 
-<script>import { isMobile, watchMobile } from '../../util/isMobile';
-import { onMount } from 'svelte';
-import { getCaret, getChapter, isChapterEditable, } from '../page/Contexts';
-export let node;
-export let id;
-export let label;
-let hovered = false;
-let chapter = getChapter();
-$: editable = isChapterEditable();
-let caret = getCaret();
-// If there's no marginal selected or this is different from the current selection, this is hidden.
-$: selectedMarginal = $chapter?.marginal;
-$: isHidden = editable
-    ? // If editable, it's hidden if the caret is not inside the marginal content.
-        !($caret?.range?.start.node === node ||
-            $caret?.range?.start.node
-                .getAncestors($caret.root)
-                .some((ancestor) => ancestor === node))
-    : // If not editable, it's hidden if it's not selected.
-        $selectedMarginal !== id;
-function toggle() {
-    if (editable)
-        return;
-    if ($chapter) {
-        if (isMobile() && isHidden)
-            $chapter.marginal.set(id);
-        // Otherwise, deselect.
-        else
-            $chapter.marginal.set(undefined);
+<script lang="ts">
+    import { isMobile, watchMobile } from '$lib/util/isMobile';
+    import { onMount } from 'svelte';
+    import type Node from '../../models/chapter/Node';
+    import {
+        getCaret,
+        getChapter,
+        isChapterEditable,
+    } from '$lib/components/page/Contexts';
+
+    export let node: Node;
+    export let id: string;
+    export let label: string;
+
+    let hovered = false;
+    let chapter = getChapter();
+    $: editable = isChapterEditable();
+    let caret = getCaret();
+
+    // If there's no marginal selected or this is different from the current selection, this is hidden.
+    $: selectedMarginal = $chapter?.marginal;
+    $: isHidden = editable
+        ? // If editable, it's hidden if the caret is not inside the marginal content.
+          !(
+              $caret?.range?.start.node === node ||
+              $caret?.range?.start.node
+                  .getAncestors($caret.root)
+                  .some((ancestor) => ancestor === node)
+          )
+        : // If not editable, it's hidden if it's not selected.
+          $selectedMarginal !== id;
+
+    function toggle() {
+        if (editable) return;
+
+        if ($chapter) {
+            if (isMobile() && isHidden) $chapter.marginal.set(id);
+            // Otherwise, deselect.
+            else $chapter.marginal.set(undefined);
+        }
     }
-}
-function handleEnter() {
-    hovered = true;
-}
-function handleExit() {
-    hovered = false;
-}
-onMount(() => {
-    const mediaWatch = watchMobile();
-    mediaWatch.addEventListener('change', toggle);
-    return () => mediaWatch.removeEventListener('change', toggle);
-});
+
+    function handleEnter() {
+        hovered = true;
+    }
+    function handleExit() {
+        hovered = false;
+    }
+
+    onMount(() => {
+        const mediaWatch = watchMobile();
+        mediaWatch.addEventListener('change', toggle);
+
+        return () => mediaWatch.removeEventListener('change', toggle);
+    });
 </script>
 
 <span

package/{components → src/lib/components}/chapter/Paragraph.svelte

@@ -1,27 +1,32 @@
 <svelte:options immutable={true} />
 
-<script>import Format from './Format.svelte';
-import { getChapter, getEdition } from '../page/Contexts';
-export let node;
-export let placeholder = undefined;
-$: level = node.getLevel();
-$: chapter = getChapter();
-$: edition = getEdition();
-$: id =
-    node.getLevel() === 0 ||
+<script lang="ts">
+    import type ParagraphNode from '$lib/models/chapter/ParagraphNode';
+    import Format from './Format.svelte';
+    import { getChapter, getEdition } from '../page/Contexts';
+
+    export let node: ParagraphNode;
+    export let placeholder: string | undefined = undefined;
+
+    $: level = node.getLevel();
+    $: chapter = getChapter();
+    $: edition = getEdition();
+
+    $: id =
+        node.getLevel() === 0 ||
         $chapter === undefined ||
         $edition === undefined
-        ? undefined
-        : 'header-' +
-            ($chapter.chapter.getAST($edition)?.getHeaders().indexOf(node) ??
-                '');
-$: classes =
-    node.getLevel() === 0
-        ? undefined
-        : 'page-header' +
-            ($chapter && $chapter.highlightedID === id
-                ? ' bookish-content-highlight'
-                : '');
+            ? undefined
+            : 'header-' +
+              ($chapter.chapter.getAST($edition)?.getHeaders().indexOf(node) ??
+                  '');
+    $: classes =
+        node.getLevel() === 0
+            ? undefined
+            : 'page-header' +
+              ($chapter && $chapter.highlightedID === id
+                  ? ' bookish-content-highlight'
+                  : '');
 </script>
 
 {#if level === 0}

package/{components → src/lib/components}/chapter/Positioned.svelte

@@ -1,6 +1,9 @@
 <svelte:options immutable={true} />
 
-<script>export let position;
+<script lang="ts">
+    import type Position from '$lib/models/chapter/Position';
+
+    export let position: Position;
 </script>
 
 <div

package/src/lib/components/chapter/Python.svelte

@@ -0,0 +1,144 @@
+<script context="module" lang="ts">
+    // Make Typescript happy
+    type Skulpt =
+        | { configure: Function; importMainWithBody: Function }
+        | undefined;
+    declare var Sk: Skulpt;
+</script>
+
+<script lang="ts">
+    import type CodeNode from '$lib/models/chapter/CodeNode';
+    import { afterUpdate, onMount } from 'svelte';
+    import Code from './Code.svelte';
+
+    export let node: CodeNode;
+    export let startCode: string;
+
+    // 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: HTMLDivElement | null = 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: string) {
+        code = newCode;
+    }
+    function handleOutput(out: string) {
+        // 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 as string);
+            }
+        }
+    }
+
+    $: 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-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>
+
+<style>
+    .bookish-python-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .bookish-python button {
+        background: var(--bookish-block-background-color);
+        border: 1px solid var(--bookish-border-color-light);
+        width: 3em;
+        height: 3rem;
+        padding: 0;
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .bookish-python .bookish-python-output {
+        flex: 1;
+        border: 1px solid lightGray;
+        padding: 0.5rem;
+        height: 3rem;
+        overflow-y: scroll;
+        display: inline-block;
+        vertical-align: top;
+        color: var(--bookish-paragraph-color);
+        font-family: var(--bookish-code-font-family);
+        font-weight: var(--bookish-code-font-weight);
+        font-size: var(--bookish-block-font-size);
+    }
+</style>

package/{components → src/lib/components}/chapter/Quote.svelte

@@ -1,10 +1,14 @@
 <svelte:options immutable={true} />
 
-<script>import Block from './Block.svelte';
-import Format from './Format.svelte';
-import Positioned from './Positioned.svelte';
-export let node;
-$: credit = node.getCredit();
+<script lang="ts">
+    import type QuoteNode from '$lib/models/chapter/QuoteNode';
+    import Block from './Block.svelte';
+    import Format from './Format.svelte';
+    import Positioned from './Positioned.svelte';
+
+    export let node: QuoteNode;
+
+    $: credit = node.getCredit();
 </script>
 
 <Positioned position={node.getPosition()}>

package/{components → src/lib/components}/chapter/Rule.svelte

@@ -1,6 +1,9 @@
 <svelte:options immutable={true} />
 
-<script>export let node;
+<script lang="ts">
+    import type RuleNode from '$lib/models/chapter/RuleNode';
+
+    export let node: RuleNode;
 </script>
 
 <hr data-nodeid={node.nodeID} />

package/{components → src/lib/components}/chapter/Table.svelte

@@ -1,12 +1,16 @@
 <svelte:options immutable={true} />
 
-<script>import Figure from './Figure.svelte';
-import Format from './Format.svelte';
-import Rows from '../page/Rows.svelte';
-import { isChapterEditable } from '../page/Contexts';
-export let node;
-let editable = isChapterEditable();
-$: rows = node.getRows();
+<script lang="ts">
+    import type TableNode from '$lib/models/chapter/TableNode';
+    import Figure from './Figure.svelte';
+    import Format from './Format.svelte';
+    import Rows from '../page/Rows.svelte';
+    import { isChapterEditable } from '../page/Contexts';
+
+    export let node: TableNode;
+
+    let editable = isChapterEditable();
+    $: rows = node.getRows();
 </script>
 
 <Figure {node} caption={node.getCaption()}>

package/src/lib/components/chapter/Text.svelte

@@ -0,0 +1,109 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+    import type TextNode from '$lib/models/chapter/TextNode';
+    import { getChapter, isChapterEditable } from '../page/Contexts';
+
+    export let node: TextNode;
+    export let placeholder: string | undefined = undefined;
+
+    $: text = node.getText();
+
+    let context = getChapter();
+    let editable = isChapterEditable();
+
+    function replaceMultipleSpacesWithNonBreakingSpaces(original: string) {
+        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;
+    }
+
+    // Manipulate text for rendering.
+    $: {
+        // 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, or a placeholder if provided.
+        if (text.length === 0) text = placeholder ?? '\ufeff';
+    }
+
+    // Compute highlights, if highlighted
+    let segments: [string, boolean][] | undefined = undefined;
+    $: {
+        segments = undefined;
+        if (!editable) {
+            // 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}