bookish-press 0.4.231 → 0.5.0

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

@@ -9,13 +9,13 @@ $: credit = node.getCredit();
 
 <Positioned position={node.getPosition()}>
     <figure>
-        <blockquote class={'bookish-blockquote'} data-nodeid={node.nodeID}>
+        <blockquote class="quote" data-nodeid={node.nodeID}>
             {#each node.getBlocks() as element (element.nodeID)}
                 <Block node={element} />
             {/each}
         </blockquote>
         {#if credit}
-            <figcaption class="bookish-blockquote-caption"
+            <figcaption class="caption {credit.isEmptyText() ? 'empty' : ''}"
                 ><Format node={credit} placeholder="credit" /></figcaption
             >
         {/if}
@@ -23,7 +23,15 @@ $: credit = node.getCredit();
 </Positioned>
 
 <style>
-    .bookish-blockquote {
+    figure {
+        margin: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+    }
+
+    .quote {
         clear: both;
         border: none;
         font-family: var(--bookish-header-font-family);
@@ -37,12 +45,12 @@ $: credit = node.getCredit();
         position: relative;
     }
 
-    .bookish-blockquote > :global(p) {
+    .quote > :global(p) {
         margin: 0;
         padding: 0;
     }
 
-    .bookish-blockquote-caption {
+    .caption {
         margin-top: 0.5em;
         text-align: right;
         font-family: var(--bookish-header-font-family);
@@ -50,19 +58,21 @@ $: credit = node.getCredit();
         color: var(--bookish-muted-color);
     }
 
-    .bookish-blockquote:before {
+    .quote:before {
         content: '\201C';
         position: relative;
-        top: 80pt;
-        left: -40pt;
-        font-family: 'Modum Extra';
+        top: 0;
+        left: -0.5em;
+        height: 0.3em;
+        font-family: var(--bookish-header-font-family);
         font-size: 120pt;
         font-weight: bold;
         color: var(--bookish-highlight-color);
         z-index: -1;
+        display: block;
     }
 
-    .bookish-blockquote-caption:before {
+    .caption:not(.empty):before {
         content: '--';
         margin-right: 0.25em;
     }

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

@@ -3,9 +3,9 @@
 <script>import Figure from './Figure.svelte';
 import Format from './Format.svelte';
 import Rows from '../page/Rows.svelte';
-import { isEditable } from '../page/Contexts';
+import { isChapterEditable } from '../page/Contexts';
 export let node;
-let editable = isEditable();
+let editable = isChapterEditable();
 $: rows = node.getRows();
 </script>
 

package/{components → package/components}/chapter/Text.svelte

@@ -1,11 +1,11 @@
 <svelte:options immutable={true} />
 
-<script>import { getChapter, isEditable } from '../page/Contexts';
+<script>import { getChapter, isChapterEditable } from '../page/Contexts';
 export let node;
 export let placeholder = undefined;
 $: text = node.getText();
 let context = getChapter();
-let editable = isEditable();
+let editable = isChapterEditable();
 function replaceMultipleSpacesWithNonBreakingSpaces(original) {
     let revisedText = '';
     for (let i = 0; i < original.length; i++) {

package/package/components/controls/DarkToggle.svelte

@@ -0,0 +1,38 @@
+<script>export let dark;
+export let toggle;
+const lightLabel = '\u263C';
+const darkLabel = '\u263E';
+function change() {
+    dark = !dark;
+    toggle();
+}
+</script>
+
+<!-- Dark mode toggle -->
+<div
+    class="dark-toggle"
+    role="button"
+    aria-label={dark === true ? 'Switch to light mode' : 'Switch to dark mode'}
+    tabIndex="0"
+    on:click={change}
+    on:keydown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            change();
+            event.stopPropagation();
+        }
+    }}
+>
+    {dark ? darkLabel : lightLabel}
+</div>
+
+<style>
+    .dark-toggle {
+        transition: transform 0.2s ease-in;
+        user-select: none;
+    }
+    .dark-toggle:hover {
+        cursor: pointer;
+        transform: scale(1.25, 1.25);
+        color: var(--bookish-paragraph-color);
+    }
+</style>

package/package/components/controls/DarkToggle.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        dark: Boolean;
+        toggle: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DarkToggleProps = typeof __propDef.props;
+export type DarkToggleEvents = typeof __propDef.events;
+export type DarkToggleSlots = typeof __propDef.slots;
+export default class DarkToggle extends SvelteComponentTyped<DarkToggleProps, DarkToggleEvents, DarkToggleSlots> {
+}
+export {};

package/{components → package/components}/editor/BookishEditor.svelte

@@ -1,6 +1,5 @@
 <script>import BookishNode from '../../models/chapter/Node';
 import ChapterNode from '../../models/chapter/ChapterNode';
-import Parser from '../../models/chapter/Parser';
 import LinkNode from '../../models/chapter/LinkNode';
 import ParagraphNode from '../../models/chapter/ParagraphNode';
 import TextNode from '../../models/chapter/TextNode';
@@ -16,17 +15,20 @@ import EmbedNode from '../../models/chapter/EmbedNode';
 import ErrorNode from '../../models/chapter/ErrorNode';
 import { caretRangeToIndexRange, indexRangeToCaretRange, } from '../../models/chapter/Caret';
 import commands from './Commands';
-import { getEdition } from '../page/Contexts';
 import { afterUpdate, onMount, setContext } from 'svelte';
-import { getCaret } from '../page/Contexts';
+import { getCaret, getRoot } from '../page/Contexts';
 import CaretView from './CaretView.svelte';
+import { writable } from 'svelte/store';
 const IDLE_TIME = 500;
-export let ast;
+export let text;
+export let parser;
 export let save;
 export let chapter;
 export let autofocus = false;
 export let component;
 export let placeholder;
+export let leasee;
+export let lease;
 let element = null;
 let caretRange = undefined;
 let caretCoordinate = undefined;
@@ -36,10 +38,19 @@ let editorFocused = false;
 let undoStack = [];
 let undoPosition = -1;
 let clipboard = undefined;
-let editedNode = ast;
 let ignoredInput = false;
-let edition = getEdition();
 let activeEditor = getCaret();
+let editedNode;
+$: {
+    // Note: when the text changes externally, the caret will be lost. We either have
+    // to implement fancy operational transform revision control for collaborative editing
+    // or a basic chapter locking strategy to avoid data loss. I went with locking for maintenance simplicity,
+    // but it would be nice to implement operational transform in the future.
+    if (editedNode === undefined || editedNode.toBookdown() !== text) {
+        editedNode = parser(text);
+    }
+}
+$: locked = typeof leasee === 'string';
 onMount(() => {
     const caret = editedNode.getFirstCaret();
     if (caret)
@@ -149,17 +160,24 @@ afterUpdate(() => {
                         ? parseInt(lineHeightString.substring(0, lineHeightString.length - 2))
                         : undefined;
                     // Is the caret in relatively positioned ancestors above the editor? Undo their offsets.
-                    let caretAncestor = startNode.closest('.bookish-editor');
+                    let caretAncestor = startNode.parentElement;
                     let relativeX = 0;
                     let relativeY = 0;
+                    let fixedX = undefined;
+                    let fixedY = undefined;
                     while (caretAncestor != null) {
-                        if (window.getComputedStyle(caretAncestor)
-                            .position === 'relative') {
+                        const style = window.getComputedStyle(caretAncestor);
+                        if (style.position === 'relative') {
                             relativeX += caretAncestor.offsetLeft;
                             relativeY += caretAncestor.offsetTop;
                         }
+                        else if (style.position === 'fixed') {
+                            fixedX = caretAncestor.offsetLeft;
+                            fixedY = caretAncestor.offsetTop;
+                        }
                         caretAncestor = caretAncestor.parentElement;
                     }
+                    // Is the caret in a fixed position marginal? Get it's position.
                     // If we're after a new line, calculate the correct position, since selections don't actually render to the next line.
                     const left = afterNewLine
                         ? textRect.left
@@ -357,17 +375,11 @@ function undo() {
     // Grab the next state
     let undoState = undoStack[undoPosition + 1];
     // Restore the content of the chapter.
-    let node = ast instanceof ChapterNode
-        ? Parser.parseChapter($edition, undoState.bookdown)
-        : ast instanceof FormatNode
-            ? Parser.parseFormat($edition, undoState.bookdown)
-            : ast instanceof EmbedNode
-                ? Parser.parseEmbed($edition, undoState.bookdown)
-                : undefined;
+    let node = parser(undoState.bookdown);
     if (node === undefined || node instanceof ErrorNode)
         return;
     // Restore the view
-    editedNode = node;
+    updateRoot(node);
     // Save the undo.
     save(node);
     // Move the undo state down a position.
@@ -383,16 +395,10 @@ function redo() {
     // Grab the next state
     let undoState = undoStack[undoPosition - 1];
     // Restore the content of the chapter.
-    let node = ast instanceof ChapterNode
-        ? Parser.parseChapter($edition, undoState.bookdown)
-        : ast instanceof FormatNode
-            ? Parser.parseFormat($edition, undoState.bookdown)
-            : ast instanceof EmbedNode
-                ? Parser.parseEmbed($edition, undoState.bookdown)
-                : undefined;
+    let node = parser(undoState.bookdown);
     if (node === undefined)
         return;
-    editedNode = node;
+    updateRoot(node);
     // Move the undo state down a position.
     if (undoPosition > 0)
         undoPosition = undoPosition - 1;
@@ -588,6 +594,9 @@ function executeCommand(command, key) {
     return false;
 }
 async function saveEdit(newRoot, newRange, command) {
+    // Don't save edits if locked.
+    if (locked)
+        return;
     // Call the save callback.
     save(newRoot);
     // Initialize a new history if we don't have one.
@@ -605,7 +614,7 @@ async function saveEdit(newRoot, newRange, command) {
             ];
     }
     // Change the chapter's AST.
-    editedNode = newRoot;
+    updateRoot(newRoot);
     // Set the new undo stack, pre-pending the new command to the front.
     const newTextRange = caretRangeToIndexRange(newRoot, newRange);
     if (newTextRange !== undefined)
@@ -626,6 +635,10 @@ async function saveEdit(newRoot, newRange, command) {
     // Update the caret
     claimActiveEditor();
 }
+function updateRoot(newRoot) {
+    editedNode = newRoot;
+    text = editedNode.toBookdown();
+}
 function editNode(previous, edited) {
     if (caretRange) {
         const newRoot = editedNode.withNodeReplaced(previous, edited);
@@ -663,8 +676,13 @@ function isFocused() {
         (element !== null && element?.contains(document.activeElement)) ||
         toolbarIsFocused());
 }
-function updateFocus() {
+function handleFocus() {
+    editorFocused = isFocused();
+    lease(true);
+}
+function handleBlur() {
     editorFocused = isFocused();
+    lease(false);
 }
 function handleCopy(node) {
     // Set the editor's clipboard.
@@ -793,15 +811,17 @@ setContext('claimeditor', claimActiveEditor);
 
 <div
     class={`bookish-editor ${inAtom ? 'bookish-editor-atom-focused' : ''}`}
+    class:locked
+    aria-disabled={locked}
     bind:this={element}
     on:keydown={handleKey}
     on:keypress={handlePress}
     on:mousedown|stopPropagation={handleMouseDown}
-    on:focus={updateFocus}
-    on:blur={updateFocus}
+    on:focus={handleFocus}
+    on:blur={handleBlur}
     tabIndex="0"
 >
-    <!-- The chapter content -->
+    <!-- A view of the root -->
     <svelte:component this={component} node={editedNode} {placeholder} />
     <!-- The caret. We render our own since this view isn't contentEditable and we can't show a caret.
          Customize the rendering based on the formatting applied to the text node. -->
@@ -815,14 +835,19 @@ setContext('claimeditor', claimActiveEditor);
             linked={isLink}
             bold={isBold}
             italic={isItalic}
-            disabled={!editorFocused}
+            disabled={!editorFocused || locked}
+            {locked}
         />
     {/if}
 </div>
 
 <style>
     .bookish-editor {
-        min-height: 2em;
+        min-height: 1em;
+    }
+
+    .locked :global(.bookish-text) {
+        color: var(--app-muted-color);
     }
 
     .bookish-editor:focus {

package/{components → package/components}/editor/BookishEditor.svelte.d.ts

@@ -2,12 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import type RootNode from '../../models/chapter/RootNode';
 declare const __propDef: {
     props: {
-        ast: RootNode;
+        text: string;
+        parser: (text: string) => RootNode;
         save: (node: RootNode) => Promise<void> | void;
         chapter: boolean;
         autofocus?: boolean | undefined;
         component: ConstructorOfATypedSvelteComponent;
         placeholder: string;
+        leasee: string | boolean;
+        lease: (lock: boolean) => Promise<boolean> | boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{components → package/components}/editor/CaretView.svelte

@@ -8,6 +8,7 @@ export let bold;
 export let disabled;
 export let ignored;
 export let blink;
+export let locked;
 let element;
 let headerHeight = 0;
 // When the caret updates, make sure it's in view.
@@ -32,7 +33,8 @@ afterUpdate(() => {
     style:height="{height}px"
     style:scroll-margin-top="{headerHeight}px"
     bind:this={element}
-/>
+    >{#if locked}🔒{/if}</div
+>
 
 <style>
     .caret {
@@ -44,7 +46,7 @@ afterUpdate(() => {
         display: inline-block;
         box-sizing: border-box;
         position: absolute;
-        z-index: 1;
+        z-index: 2;
     }
 
     @keyframes caret-blink {

package/{components → package/components}/editor/CaretView.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         disabled: boolean;
         ignored: boolean;
         blink: boolean;
+        locked: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/editor/ConfirmButton.svelte

@@ -0,0 +1,23 @@
+<script>import Button from '../app/Button.svelte';
+export let tooltip;
+export let confirm;
+export let command;
+let confirming = false;
+</script>
+
+<div class="confirm">
+    {#if !confirming}
+        <Button {tooltip} command={() => (confirming = true)}><slot /></Button>
+    {:else}
+        <Button tooltip="no" command={() => (confirming = false)}>no</Button
+        >&nbsp;<Button tooltip="yes" {command}>{confirm}</Button>
+    {/if}
+</div>
+
+<style>
+    .confirm {
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+        display: inline-block;
+    }
+</style>

package/{components → package/components}/editor/ConfirmButton.svelte.d.ts

@@ -1,15 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        commandLabel: string;
         tooltip: string;
-        confirmLabel: string;
+        confirm: string;
         command: () => Promise<void> | void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type ConfirmButtonProps = typeof __propDef.props;
 export type ConfirmButtonEvents = typeof __propDef.events;

package/{components → package/components}/editor/EmbedEditor.svelte

@@ -37,7 +37,7 @@ function handleImageChange(event) {
     if (media === undefined)
         return;
     media.upload(file, (progress) => (upload = `${progress}% done`), (error) => (upload = error), (url, thumbnail) => {
-        // Upload completed successfully, now we can get the download URL
+        // Upload completed successfully, update the front end.
         $caret?.edit(embed, embed.withURLs(url, thumbnail).withDescription(''));
         upload = undefined;
     });

package/{components → package/components}/editor/LinkEditor.svelte

@@ -1,5 +1,5 @@
 <script>import URLEditor from './URLEditor.svelte';
-import { getChapter, getEdition } from '../page/Contexts';
+import { getChapter, getEdition, getRoot } from '../page/Contexts';
 import Icon from './Icon.svelte';
 import Button from '../app/Button.svelte';
 import UnlinkIcon from './icons/unlink.svg?raw';
@@ -9,6 +9,7 @@ export let link;
 let caret = getCaret();
 let edition = getEdition();
 let chapter = getChapter();
+let root = getRoot();
 $: url = link.getMeta();
 function saveEdit(value) {
     $caret?.edit(link, link.withMeta(value));
@@ -38,8 +39,8 @@ function validate(urlOrChapter) {
     if (chapterID === undefined || labelID === undefined)
         return;
     // The chapter ID is optional; if it's missing, it refers to this chapter.
-    const correspondingChapter = chapterID === '' && $chapter
-        ? $chapter.chapter.getAST($edition)
+    const correspondingChapter = chapterID === ''
+        ? $root
         : $edition?.getChapter(chapterID)?.getAST($edition);
     if (correspondingChapter === undefined)
         return 'Not a valid URL or chapter.';

package/{components → package/components}/editor/Note.svelte

@@ -4,6 +4,7 @@
     span {
         font-size: small;
         font-style: italic;
+        font-weight: normal;
         color: var(--app-muted-color);
     }
 </style>