bookish-press 0.4.47 → 0.4.48

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

@@ -1,42 +0,0 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">
-    import type BlockNode from '$lib/models/chapter/BlockNode';
-    import CalloutNode from '$lib/models/chapter/CalloutNode';
-    import CodeNode from '$lib/models/chapter/CodeNode';
-    import EmbedNode from '$lib/models/chapter/EmbedNode';
-    import ErrorNode from '$lib/models/chapter/ErrorNode';
-    import ListNode from '$lib/models/chapter/ListNode';
-    import ParagraphNode from '$lib/models/chapter/ParagraphNode';
-    import QuoteNode from '$lib/models/chapter/QuoteNode';
-    import RuleNode from '$lib/models/chapter/RuleNode';
-    import TableNode from '$lib/models/chapter/TableNode';
-
-    import Callout from './Callout.svelte';
-    import CaptionedCode from './CaptionedCode.svelte';
-    import Embed from './Embed.svelte';
-    import ErrorMessage from './ErrorMessage.svelte';
-    import List from './List.svelte';
-    import Paragraph from './Paragraph.svelte';
-    import Quote from './Quote.svelte';
-    import Rule from './Rule.svelte';
-    import Table from './Table.svelte';
-    import Problem from './Problem.svelte';
-    import { isChapterEditable } from '../page/Contexts';
-
-    export let node: BlockNode;
-
-    let editable = isChapterEditable();
-</script>
-
-{#if node instanceof ParagraphNode}<Paragraph {node} />
-{:else if node instanceof ListNode}<List {node} />
-{:else if node instanceof EmbedNode}<Embed {node} {editable} />
-{:else if node instanceof CalloutNode}<Callout {node} />
-{:else if node instanceof QuoteNode}<Quote {node} />
-{:else if node instanceof CodeNode}<CaptionedCode {node} />
-{:else if node instanceof ErrorNode}<ErrorMessage {node} />
-{:else if node instanceof RuleNode}<Rule {node} />
-{:else if node instanceof TableNode}<Table {node} />
-{:else}<p><Problem>Unknown node type</Problem></p>
-{/if}

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

@@ -1,12 +0,0 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">
-    import type ErrorNode from '$lib/models/chapter/ErrorNode';
-    import Problem from './Problem.svelte';
-
-    export let node: ErrorNode;
-</script>
-
-<Problem
-    ><span data-nodeid={node.nodeID}>Error: {node.getError()}</span></Problem
->

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

@@ -1,144 +0,0 @@
-<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/src/lib/components/chapter/Text.svelte

@@ -1,109 +0,0 @@
-<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}