bookish-press 0.4.1 → 0.4.21

package/components/chapter/Quote.svelte

@@ -1,16 +1,69 @@
-<script>import Block from "./Block.svelte";
+<svelte:options immutable={true} />
+
+<script>import Block from './Block.svelte';
 import Format from './Format.svelte';
-import renderPosition from "./renderPosition";
+import Positioned from './Positioned.svelte';
 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>
+<Positioned position={node.getPosition()}>
+    <figure>
+        <blockquote class={'bookish-blockquote'} data-nodeid={node.nodeID}>
+            {#each node.getBlocks() as element (element.nodeID)}
+                <Block node={element} />
+            {/each}
+        </blockquote>
+        {#if credit}
+            <figcaption class="bookish-blockquote-caption"
+                ><Format node={credit} placeholder="credit" /></figcaption
+            >
+        {/if}
+    </figure>
+</Positioned>
+
+<style>
+    .bookish-blockquote {
+        clear: both;
+        border: none;
+        font-family: var(--bookish-header-font-family);
+        font-weight: 400;
+        font-style: italic;
+        padding: 0;
+        margin-top: var(--bookish-paragraph-spacing);
+        margin-bottom: var(--bookish-paragraph-spacing);
+        margin-left: var(--bookish-indent);
+        margin-right: var(--bookish-indent);
+        position: relative;
+    }
+
+    .bookish-blockquote > :global(p) {
+        margin: 0;
+        padding: 0;
+    }
+
+    .bookish-blockquote-caption {
+        margin-top: 0.5em;
+        text-align: right;
+        font-family: var(--bookish-header-font-family);
+        font-style: italic;
+        color: var(--bookish-muted-color);
+    }
+
+    .bookish-blockquote:before {
+        content: '\201C';
+        position: relative;
+        top: 80pt;
+        left: -40pt;
+        font-family: 'Modum Extra';
+        font-size: 120pt;
+        font-weight: bold;
+        color: var(--bookish-highlight-color);
+        z-index: -1;
+    }
+
+    .bookish-blockquote-caption:before {
+        content: '--';
+        margin-right: 0.25em;
+    }
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type QuoteNode from "../../models/chapter/QuoteNode";
+import type QuoteNode from '../../models/chapter/QuoteNode';
 declare const __propDef: {
     props: {
         node: QuoteNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type QuoteProps = typeof __propDef.props;
-export declare type QuoteEvents = typeof __propDef.events;
-export declare type QuoteSlots = typeof __propDef.slots;
+export type QuoteProps = typeof __propDef.props;
+export type QuoteEvents = typeof __propDef.events;
+export type QuoteSlots = typeof __propDef.slots;
 export default class Quote extends SvelteComponentTyped<QuoteProps, QuoteEvents, QuoteSlots> {
 }
 export {};

package/components/chapter/Rule.svelte

@@ -1,4 +1,15 @@
+<svelte:options immutable={true} />
+
 <script>export let node;
 </script>
 
-<hr data-nodeid={node.nodeID}/>
+<hr data-nodeid={node.nodeID} />
+
+<style>
+    hr {
+        border: none;
+        border-bottom: 1px solid var(--bookish-border-color-light);
+        margin-top: calc(var(--bookish-paragraph-spacing) * 3);
+        margin-bottom: calc(var(--bookish-paragraph-spacing) * 3);
+    }
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type RuleNode from "../../models/chapter/RuleNode";
+import type RuleNode from '../../models/chapter/RuleNode';
 declare const __propDef: {
     props: {
         node: RuleNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RuleProps = typeof __propDef.props;
-export declare type RuleEvents = typeof __propDef.events;
-export declare type RuleSlots = typeof __propDef.slots;
+export type RuleProps = typeof __propDef.props;
+export type RuleEvents = typeof __propDef.events;
+export type RuleSlots = typeof __propDef.slots;
 export default class Rule extends SvelteComponentTyped<RuleProps, RuleEvents, RuleSlots> {
 }
 export {};

package/components/chapter/Table.svelte

@@ -1,29 +1,40 @@
-<script>import Format from './Format.svelte';
-import renderPosition from "./renderPosition";
+<svelte:options immutable={true} />
+
+<script>import Figure from './Figure.svelte';
+import Format from './Format.svelte';
+import Rows from '../page/Rows.svelte';
+import { isEditable } from '../page/Contexts';
 export let node;
+let editable = isEditable();
 $: 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>
+<Figure {node} caption={node.getCaption()}>
+    <Rows>
+        {#each rows as row, index}
+            <tr class={editable ? 'editable' : null}>
+                {#if row.length === 1}
+                    <svelte:element this={index === 0 ? 'th' : 'td'}>
+                        colspan={rows.reduce(
+                            (max, row) => Math.max(row.length, max),
+                            0
+                        )}><Format node={row[0]} /></svelte:element
+                    >
+                {:else}
+                    {#each row as cell (cell.nodeID)}
+                        <svelte:element this={index === 0 ? 'th' : 'td'}
+                            ><Format node={cell} /></svelte:element
+                        >
+                    {/each}
+                {/if}
+            </tr>
+        {/each}
+    </Rows>
+</Figure>
+
+<style>
+    tr.editable td,
+    tr.editable th {
+        border: 1px dotted var(--app-border-color);
+    }
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type TableNode from "../../models/chapter/TableNode";
+import type TableNode from '../../models/chapter/TableNode';
 declare const __propDef: {
     props: {
         node: TableNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type TableProps = typeof __propDef.props;
-export declare type TableEvents = typeof __propDef.events;
-export declare type TableSlots = typeof __propDef.slots;
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
 export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
 }
 export {};

package/components/chapter/Text.svelte

@@ -1,62 +1,87 @@
-<script>import { getChapter } from "../page/Contexts";
+<svelte:options immutable={true} />
+
+<script>import { getChapter, isEditable } from '../page/Contexts';
 export let node;
+export let placeholder = undefined;
 $: text = node.getText();
 let context = getChapter();
+let editable = isEditable();
 function replaceMultipleSpacesWithNonBreakingSpaces(original) {
-    let revisedText = "";
+    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";
+        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;
+// 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.
+    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 = "\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);
+        text = placeholder ?? '\ufeff';
+}
+// Compute highlights, if highlighted
+let segments = 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,
+                    ]);
             }
-            // 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>
+{#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}
+    <span class={'bookish-text'} data-nodeid={node.nodeID}>{text}</span>
+{/if}

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

@@ -1,17 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type TextNode from "../../models/chapter/TextNode";
+import type TextNode from '../../models/chapter/TextNode';
 declare const __propDef: {
     props: {
         node: TextNode;
+        placeholder?: string | undefined;
     };
     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 type TextProps = typeof __propDef.props;
+export type TextEvents = typeof __propDef.events;
+export type TextSlots = typeof __propDef.slots;
 export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
 }
 export {};