bookish-press 0.4.0 → 0.4.3

package/components/editor/TextEditor.svelte

@@ -3,7 +3,7 @@
     Status[Status["Viewing"] = 0] = "Viewing";
     Status[Status["Editing"] = 1] = "Editing";
 })(Status || (Status = {}));
-export let startText;
+export let text;
 export let label;
 export let placeholder;
 export let valid;
@@ -11,21 +11,26 @@ export let save;
 export let saveOnExit = false;
 export let width = undefined;
 export let clip = false;
-let text = startText;
+export let move = undefined;
 let status = Status.Viewing;
-let error = valid(text);
 let field = null;
 let sizer = null;
+$: error = valid(text);
 // Grow the sizer when text or status changes.
 $: {
     if (sizer) {
         // Set the invisible sizer to the text to set the container's width.
         // The browser strips trailing spaces, causing jitter after a space, so we replace
         // them with non-breaking spaces.
-        const sizedText = showPlaceholder() ? placeholder : text.replace(/\s/g, "\u00a0");
+        const sizedText = showPlaceholder()
+            ? placeholder
+            : text.replace(/\s/g, '\u00a0');
         // Clip the text to prevent this editor from getting too long when editing or when asked to.. If it goes past one line,
         // the measurements and layout are way off.
-        const trimmedText = width !== undefined && (clip === true || status === Status.Editing) ? sizedText.substring(0, width) + "…" : sizedText;
+        const trimmedText = width !== undefined &&
+            (clip === true || status === Status.Editing)
+            ? sizedText.substring(0, width) + '…'
+            : sizedText;
         sizer.innerHTML = trimmedText;
     }
 }
@@ -46,7 +51,7 @@ $: {
         saveText(text);
 }
 function showPlaceholder() {
-    return text === "";
+    return text === '';
 }
 function startEditing() {
     status = Status.Editing;
@@ -66,64 +71,86 @@ function edit() {
 function saveText(newText) {
     if (validate(newText) === undefined) {
         const revisedText = save(newText);
-        if (typeof revisedText === "string") {
+        if (typeof revisedText === 'string') {
             text = revisedText;
         }
         if (revisedText instanceof Promise)
-            revisedText.catch((err) => error = err.message);
+            revisedText.catch((err) => (error = err.message));
     }
 }
 function validate(value) {
     return valid(value);
 }
 function handleKeyPress(event) {
-    if (event.key === "Enter")
+    if (event.key === 'Enter')
         status = Status.Viewing;
+    else if (event.key === 'ArrowUp' && move && field) {
+        event.preventDefault();
+        move(field, -1);
+    }
+    else if (event.key === 'ArrowDown' && move && field) {
+        event.preventDefault();
+        move(field, 1);
+    }
 }
 </script>
 
-<span class={`bookish-text-editor ${showPlaceholder() ? "bookish-text-editor-placeholder" : ""} ${status === Status.Viewing ? "bookish-text-editor-viewing" : ""}`}>
-    <span class="bookish-text-editor-sizer" aria-hidden={true} bind:this={sizer} on:click={startEditing}></span>
+<span
+    class={`text-editor ${showPlaceholder() ? 'placeholder' : ''} ${
+        status === Status.Viewing ? 'viewing' : ''
+    }`}
+>
+    <span
+        class={`sizer ${error ? 'error' : ''}`}
+        aria-hidden={true}
+        bind:this={sizer}
+        on:click={startEditing}
+    />
     <input
-        type="text" 
+        type="text"
         bind:this={field}
         bind:value={text}
         required
         role="textbox"
         aria-invalid={error !== undefined}
         aria-label={label}
-        placeholder={placeholder}
+        aria-placeholder={label}
+        {placeholder}
         on:change={edit}
-        on:keypress={handleKeyPress}
+        on:keydown={handleKeyPress}
         on:blur={stopEditing}
         on:focus={startEditing}
     />
-    {#if error }
+    {#if error && status === Status.Editing}
         <span
             aria-live="polite"
-            class={`bookish-text-editor-error ${status === Status.Editing ? "bookish-text-editor-error-focused" : ""}`}
+            class={`text-editor-error ${
+                status === Status.Editing ? 'editing' : ''
+            }`}
         >
-            {status === Status.Viewing ? "\u2715" : error}
+            {error}
         </span>
     {/if}
 </span>
 
 <style>
-    .bookish-text-editor {
+    .text-editor {
         position: relative;
     }
 
-    .bookish-text-editor input[type="text"] {
+    input[type='text'] {
         cursor: pointer;
         position: absolute;
+        top: 0;
         left: 0;
-        margin-top: -2px; /* Matches the outline offset */
-        width: 100%;
+        width: 100%; /* Fill the entire space so that alignment with sizer is correct.*/
+        height: 100%;
         min-width: 0.5em;
     }
 
     /* Match the parent's styling as much as possible. */
-    .bookish-text-editor input[type="text"], .bookish-text-editor-sizer {
+    input[type='text'],
+    .sizer {
         background-color: inherit;
         font-family: inherit;
         font-size: inherit;
@@ -131,40 +158,59 @@ function handleKeyPress(event) {
         font-style: inherit;
         line-height: inherit;
         color: inherit;
-        border: none;
         box-sizing: content-box;
         padding: 0;
         margin: 0;
         display: inline;
         cursor: text;
+        vertical-align: inherit;
+    }
+
+    input[type='text']:focus {
+        outline: none;
+        border: none;
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-interactive-color);
     }
 
     /* This ensures the error message always appears below empty text editors */
-    .bookish-text-editor-sizer {
+    .sizer {
         min-height: 1em;
         opacity: 0;
+        border: none;
+        outline: none;
     }
 
-    .bookish-text-editor-viewing .bookish-text-editor-sizer {
+    .sizer.error {
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-error-color) !important;
+    }
+
+    .viewing .sizer {
         opacity: 1;
     }
 
     /* This ensures that the sizer doesn't end up with zero width and height. */
-    .bookish-text-editor-sizer:empty:before {
-        content: "\200b";
+    .sizer:empty:before {
+        content: '\200b';
     }
 
     /* Override the inherited color of the text is a placeholder */
-    .bookish-text-editor-placeholder .bookish-text-editor-sizer {
-        color: var(--bookish-app-chrome-muted);
+    .placeholder .sizer {
+        color: var(--app-muted-color);
     }
 
     /* Hide the text field when its being viewed so we can let the sizer display the full value, in case it's long. */
-    .bookish-text-editor.bookish-text-editor-viewing input {
+    .text-editor.viewing input {
         opacity: 0;
     }
 
-    .bookish-text-editor .bookish-text-editor-error {
+    .editing {
+        /* Put this above other errors nearby. */
+        z-index: 4;
+    }
+
+    .text-editor-error {
         position: absolute;
         left: 0;
         top: 100%;
@@ -173,21 +219,13 @@ function handleKeyPress(event) {
         line-height: 1em;
         margin-left: -0.5em;
         padding: 0.5em 0.5em;
-    }
-
-    .bookish-text-editor .bookish-text-editor-error.bookish-text-editor-error-focused {
-        /* Put this above other errors nearby. */
-        z-index: 4;
-    }
-
-    .bookish-editor-error, .bookish-text-editor-error {
-        font-family: var(--bookish-app-chrome-font-family);
-        font-size: var(--bookish-small-font-size);
+        font-family: var(--app-font);
+        font-size: 80%;
         font-weight: normal;
         font-style: normal;
-        color: var(--bookish-app-error-color);
-        background: var(--bookish-background-color);
+        color: var(--app-error-color);
+        border-radius: var(--app-chrome-roundedness);
+        background: var(--app-chrome-background);
         animation: failure 100ms 10;
     }
-
-</style>
+</style>

package/components/editor/TextEditor.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        startText: string;
+        text: string;
         label: string;
         placeholder: string;
         valid: (text: string) => string | undefined;
@@ -9,15 +9,16 @@ declare const __propDef: {
         saveOnExit?: boolean | undefined;
         width?: number | undefined;
         clip?: boolean | undefined;
+        move?: ((el: HTMLElement, direction: -1 | 1) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type TextEditorProps = typeof __propDef.props;
-export declare type TextEditorEvents = typeof __propDef.events;
-export declare type TextEditorSlots = typeof __propDef.slots;
+export type TextEditorProps = typeof __propDef.props;
+export type TextEditorEvents = typeof __propDef.events;
+export type TextEditorSlots = typeof __propDef.slots;
 export default class TextEditor extends SvelteComponentTyped<TextEditorProps, TextEditorEvents, TextEditorSlots> {
 }
 export {};

package/components/editor/Toggle.svelte

@@ -15,24 +15,27 @@ function toggle() {
         return;
     }
     promise
-        .then(() => saving = Status.Viewing)
-        .catch(() => saving = Status.Error);
+        .then(() => (saving = Status.Viewing))
+        .catch(() => (saving = Status.Error));
 }
 </script>
 
-<div 
-    class={`bookish-app-interactive ${saving === Status.Saving ? " bookish-text-editor-saving" : ""} ${saving === Status.Error ? " bookish-text-editor-error" : ""}`}
-    tabIndex=0
+<div
+    class={`bookish-app-interactive ${
+        saving === Status.Saving ? ' bookish-text-editor-saving' : ''
+    } ${saving === Status.Error ? ' bookish-text-editor-error' : ''}`}
+    tabIndex="0"
     role="switch"
     aria-checked={on}
-    on:keydown|preventDefault={event => event.key === "Enter" || event.key === "Space" ? toggle() : undefined }
+    on:keydown={(event) =>
+        event.key === 'Enter' || event.key === 'Space' ? toggle() : undefined}
     on:click={toggle}
 >
-    <slot></slot>
+    <slot />
 </div>
 
 <style>
     .bookish-app-interactive {
         cursor: pointer;
     }
-</style>
+</style>

package/components/editor/Toggle.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         on: boolean;
-        save: (set: boolean) => Promise<void> | undefined;
+        save: (set: boolean) => Promise<void> | void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ToggleProps = typeof __propDef.props;
-export declare type ToggleEvents = typeof __propDef.events;
-export declare type ToggleSlots = typeof __propDef.slots;
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
 export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }
 export {};