bookish-press 0.4.0

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        options: string[];
+        value: string;
+        position: string;
+        enabled?: boolean | undefined;
+        edit: (newValue: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SwitchProps = typeof __propDef.props;
+export declare type SwitchEvents = typeof __propDef.events;
+export declare type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
+}
+export {};

package/components/editor/TextEditor.svelte

@@ -0,0 +1,193 @@
+<script>var Status;
+(function (Status) {
+    Status[Status["Viewing"] = 0] = "Viewing";
+    Status[Status["Editing"] = 1] = "Editing";
+})(Status || (Status = {}));
+export let startText;
+export let label;
+export let placeholder;
+export let valid;
+export let save;
+export let saveOnExit = false;
+export let width = undefined;
+export let clip = false;
+let text = startText;
+let status = Status.Viewing;
+let error = valid(text);
+let field = null;
+let sizer = null;
+// 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");
+        // 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;
+        sizer.innerHTML = trimmedText;
+    }
+}
+// When status changes, focus or blur.
+$: {
+    if (field) {
+        if (status === Status.Editing) {
+            field.focus();
+        }
+        else {
+            field.blur();
+        }
+    }
+}
+// When text changes, save, unless we only save on exit.
+$: {
+    if (!saveOnExit)
+        saveText(text);
+}
+function showPlaceholder() {
+    return text === "";
+}
+function startEditing() {
+    status = Status.Editing;
+}
+function stopEditing() {
+    status = Status.Viewing;
+    if (saveOnExit)
+        saveText(text);
+}
+function edit() {
+    if (field) {
+        text = field.value;
+        if (saveOnExit === false)
+            saveText(text);
+    }
+}
+function saveText(newText) {
+    if (validate(newText) === undefined) {
+        const revisedText = save(newText);
+        if (typeof revisedText === "string") {
+            text = revisedText;
+        }
+        if (revisedText instanceof Promise)
+            revisedText.catch((err) => error = err.message);
+    }
+}
+function validate(value) {
+    return valid(value);
+}
+function handleKeyPress(event) {
+    if (event.key === "Enter")
+        status = Status.Viewing;
+}
+</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>
+    <input
+        type="text" 
+        bind:this={field}
+        bind:value={text}
+        required
+        role="textbox"
+        aria-invalid={error !== undefined}
+        aria-label={label}
+        placeholder={placeholder}
+        on:change={edit}
+        on:keypress={handleKeyPress}
+        on:blur={stopEditing}
+        on:focus={startEditing}
+    />
+    {#if error }
+        <span
+            aria-live="polite"
+            class={`bookish-text-editor-error ${status === Status.Editing ? "bookish-text-editor-error-focused" : ""}`}
+        >
+            {status === Status.Viewing ? "\u2715" : error}
+        </span>
+    {/if}
+</span>
+
+<style>
+    .bookish-text-editor {
+        position: relative;
+    }
+
+    .bookish-text-editor input[type="text"] {
+        cursor: pointer;
+        position: absolute;
+        left: 0;
+        margin-top: -2px; /* Matches the outline offset */
+        width: 100%;
+        min-width: 0.5em;
+    }
+
+    /* Match the parent's styling as much as possible. */
+    .bookish-text-editor input[type="text"], .bookish-text-editor-sizer {
+        background-color: inherit;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        font-style: inherit;
+        line-height: inherit;
+        color: inherit;
+        border: none;
+        box-sizing: content-box;
+        padding: 0;
+        margin: 0;
+        display: inline;
+        cursor: text;
+    }
+
+    /* This ensures the error message always appears below empty text editors */
+    .bookish-text-editor-sizer {
+        min-height: 1em;
+        opacity: 0;
+    }
+
+    .bookish-text-editor-viewing .bookish-text-editor-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";
+    }
+
+    /* Override the inherited color of the text is a placeholder */
+    .bookish-text-editor-placeholder .bookish-text-editor-sizer {
+        color: var(--bookish-app-chrome-muted);
+    }
+
+    /* 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 {
+        opacity: 0;
+    }
+
+    .bookish-text-editor .bookish-text-editor-error {
+        position: absolute;
+        left: 0;
+        top: 100%;
+        width: max-content;
+        z-index: 3;
+        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-weight: normal;
+        font-style: normal;
+        color: var(--bookish-app-error-color);
+        background: var(--bookish-background-color);
+        animation: failure 100ms 10;
+    }
+
+</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        startText: string;
+        label: string;
+        placeholder: string;
+        valid: (text: string) => string | undefined;
+        save: (text: string) => Promise<void> | undefined | void | string;
+        saveOnExit?: boolean | undefined;
+        width?: number | undefined;
+        clip?: boolean | 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 default class TextEditor extends SvelteComponentTyped<TextEditorProps, TextEditorEvents, TextEditorSlots> {
+}
+export {};

package/components/editor/Toggle.svelte

@@ -0,0 +1,38 @@
+<script>var Status;
+(function (Status) {
+    Status[Status["Viewing"] = 0] = "Viewing";
+    Status[Status["Saving"] = 1] = "Saving";
+    Status[Status["Error"] = 2] = "Error";
+})(Status || (Status = {}));
+export let on;
+export let save;
+let saving = Status.Viewing;
+function toggle() {
+    saving = Status.Saving;
+    const promise = save(!on);
+    if (promise === undefined) {
+        saving = Status.Viewing;
+        return;
+    }
+    promise
+        .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
+    role="switch"
+    aria-checked={on}
+    on:keydown|preventDefault={event => event.key === "Enter" || event.key === "Space" ? toggle() : undefined }
+    on:click={toggle}
+>
+    <slot></slot>
+</div>
+
+<style>
+    .bookish-app-interactive {
+        cursor: pointer;
+    }
+</style>

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

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

package/components/editor/Toolbar.svelte

@@ -0,0 +1,202 @@
+<script>import commands from "./Commands";
+import TextNode from "../../models/chapter/TextNode";
+import AtomNode from "../../models/chapter/AtomNode";
+import LinkNode from "../../models/chapter/LinkNode";
+import LabelNode from "../../models/chapter/LabelNode";
+import InlineCodeNode from "../../models/chapter/InlineCodeNode";
+import CitationsNode from "../../models/chapter/CitationsNode";
+import DefinitionNode from "../../models/chapter/DefinitionNode";
+import CodeNode from "../../models/chapter/CodeNode";
+import CalloutNode from "../../models/chapter/CalloutNode";
+import EmbedNode from "../../models/chapter/EmbedNode";
+import QuoteNode from "../../models/chapter/QuoteNode";
+import LabelEditor from "./LabelEditor.svelte";
+import InlineCodeEditor from "./InlineCodeEditor.svelte";
+import CitationsEditor from "./CitationsEditor.svelte";
+import LinkEditor from "./LinkEditor.svelte";
+import DefinitionEditor from "./DefinitionEditor.svelte";
+import CaptionedCodeEditor from "./CaptionedCodeEditor.svelte";
+import CalloutEditor from "./CalloutEditor.svelte";
+import QuoteEditor from "./QuoteEditor.svelte";
+import EmbedEditor from "./EmbedEditor.svelte";
+import ToolbarGroup from "./ToolbarGroup.svelte";
+import ToolbarIcon from "./ToolbarIcon.svelte";
+import { onMount } from "svelte";
+const keyLabels = {
+    "Digit0": "0",
+    "Digit1": "1",
+    "Digit2": "2",
+    "Digit3": "3",
+    "ArrowDown": "↓",
+    "ArrowUp": "↑",
+    "ArrowLeft": "←",
+    "ArrowRight": "→",
+    "Backspace": "\u232B",
+};
+const categoryOrder = {
+    "navigation": 1,
+    "selection": 2,
+    "text": 3,
+    "clipboard": 4,
+    "annotation": 5,
+    "paragraph": 6,
+    "level": 7,
+    "list": 8,
+    "table": 9,
+    "block": 10,
+};
+const categoryIcons = {
+    "text": "text.svg",
+    "clipboard": "scissors.svg",
+    "annotation": "hash.svg",
+    "level": "level.svg",
+    "block": "block.svg",
+    "list": "list.svg",
+    "table": "▦",
+    "history": "\u2026"
+};
+export let context = undefined;
+export let executor = undefined;
+export let visible = false;
+$: chapter = context?.root;
+let element = null;
+let categories = undefined;
+let commandsByCategory = {};
+let metaNode = undefined;
+let calloutNode = undefined;
+let quoteNode = undefined;
+let embedNode = undefined;
+$: isVisible = visible || containsFocus();
+// Listen to focus changes to decide whether the toolbar is visible.
+onMount(() => {
+    window.addEventListener("focus", updateVisible);
+    window.addEventListener("blur", updateVisible);
+    return () => {
+        window.removeEventListener("focus", updateVisible);
+        window.removeEventListener("blur", updateVisible);
+    };
+});
+function containsFocus() { return element !== null && element.contains(document.activeElement); }
+function updateVisible() {
+    isVisible = visible || containsFocus();
+}
+function getShortcutDescription(command) {
+    const macOS = navigator.platform.indexOf('Mac') > -1;
+    const controlSymbol = macOS ? "\u2318" : "Ctrl+";
+    const altSymbol = macOS ? "\u2325" : "Alt+";
+    const key = command.key ? (Array.isArray(command.key) ? command.key.join("/") : command.key) : command.code ? command.code : "any";
+    const keyLabel = (key in keyLabels ? keyLabels[key] : key).toLocaleUpperCase();
+    return `${command.control ? controlSymbol : ""}${command.alt ? altSymbol : ""}${command.shift ? "\u21E7" : ""}${keyLabel}`;
+}
+// Update the above when the dependencies below change.
+$: {
+    if (context !== undefined && chapter) {
+        // Filter the commands by those interactive with a mouse and active.
+        const visible = commands.filter(command => command.visible === true || (context && command.visible instanceof Function && command.visible(context)));
+        // Extract the active categories and sort them
+        categories =
+            Array.from(new Set(commands.map(command => command.category)))
+                .sort((a, b) => a in categoryOrder && b in categoryOrder ? categoryOrder[a] - categoryOrder[b] : 0);
+        // Make a list for each category of commands
+        commandsByCategory = {};
+        categories.forEach(cat => {
+            if (commandsByCategory)
+                commandsByCategory[cat] = visible.filter(command => command.category === cat);
+        });
+        const caretNode = context.start.node;
+        metaNode =
+            caretNode instanceof AtomNode ? caretNode :
+                caretNode instanceof TextNode ? caretNode.getParent(chapter) :
+                    undefined;
+        calloutNode = caretNode.getClosestParentMatching(chapter, p => p instanceof CalloutNode);
+        quoteNode = caretNode.getClosestParentMatching(chapter, p => p instanceof QuoteNode);
+        embedNode = caretNode.getClosestParentMatching(chapter, p => p instanceof EmbedNode);
+    }
+}
+function handleKeyPress(event) {
+    // Return focus to the editor if someone presses an unhandled enter
+    if (event.key === "Enter" && element) {
+        const editor = element.closest(".bookish-editor");
+        if (editor instanceof HTMLElement) {
+            event.stopPropagation();
+            editor.focus();
+        }
+        return true;
+    }
+}
+</script>
+
+{#if chapter}
+    <section 
+        class="bookish-editor-toolbar" 
+        on:keypress={handleKeyPress} 
+        style={`margin: ${isVisible ? "0px" : "-20em"};`} 
+        bind:this={element}
+        on:mousedown|stopPropagation={ () => element?.focus() }
+        tabIndex=0
+    >
+        {#if context && categories && executor}
+            {#each categories as cat }
+                {#if commandsByCategory[cat].length > 0 }
+                    <ToolbarGroup linebreak={false} icon={ cat in categoryIcons ? categoryIcons[cat] : cat.charAt(0).toUpperCase() + cat.slice(1) }>
+                        {#each commandsByCategory[cat] as command }
+                            <button 
+                                disabled={command.active === false || (command.active instanceof Function && command.active.call(undefined, context) === false)}
+                                title={command.description + " " + getShortcutDescription(command)}
+                                tabIndex=0
+                                on:click|stopPropagation|preventDefault={() => executor?.call(undefined, command, "")}
+                                on:keypress={event => event.key === " " || event.key === "Enter" ? executor?.call(undefined, command, "") : undefined }
+                            >
+                                {#if command.icon }
+                                    <ToolbarIcon name={command.icon}/>
+                                {:else if command.label }
+                                    {command.label}
+                                {:else}
+                                    {command.description }
+                                {/if}
+                            </button>
+                        {/each}
+                    </ToolbarGroup>
+                {/if}
+            {/each}
+        {/if}
+        {#if metaNode instanceof LinkNode}<ToolbarGroup icon="link.svg"><LinkEditor link={metaNode}/></ToolbarGroup>{/if}
+        {#if metaNode instanceof LabelNode}<ToolbarGroup icon="•"><LabelEditor label={metaNode}/></ToolbarGroup>{/if}
+        {#if metaNode instanceof InlineCodeNode}<ToolbarGroup icon="code.svg"><InlineCodeEditor code={metaNode}/></ToolbarGroup>{/if}
+        {#if metaNode instanceof CitationsNode}<ToolbarGroup icon="¹"><CitationsEditor citations={metaNode}/></ToolbarGroup>{/if}
+        {#if metaNode instanceof DefinitionNode}<ToolbarGroup icon="Aa"><DefinitionEditor definition={metaNode}/></ToolbarGroup>{/if}
+        {#if metaNode instanceof CodeNode && context}<ToolbarGroup icon="code.svg"><CaptionedCodeEditor code={metaNode}/></ToolbarGroup>{/if}
+        {#if calloutNode}<ToolbarGroup icon="🄰"><CalloutEditor callout={calloutNode} /></ToolbarGroup>{/if}
+        {#if quoteNode}<ToolbarGroup icon="quote.svg"><QuoteEditor quote={quoteNode} /></ToolbarGroup>{/if}
+        {#if embedNode}<ToolbarGroup linebreak icon="media.svg"><EmbedEditor embed={embedNode} /></ToolbarGroup>{/if}
+    </section>
+{/if}
+
+<style>
+
+    .bookish-editor-toolbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background: var(--bookish-background-color);
+        border: var(--bookish-app-chrome-border-width) solid var(--bookish-app-chrome-border-color);
+        padding: var(--bookish-app-chrome-padding);
+        font-family: var(--bookish-app-chrome-font-family);
+        font-size: var(--bookish-app-chrome-font-size);
+        z-index: 2;
+        transition: top 1s;
+    }
+
+    .bookish-editor-toolbar :global(img) {
+        width: 1em;
+        height: 1em;
+    }
+
+    .bookish-editor-toolbar :global(hr) {
+        margin-top: var(--bookish-app-chrome-padding);
+        margin-bottom: var(--bookish-app-chrome-padding);
+        line-height: 1em;
+    }
+
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type Command from "./Command";
+import type CaretState from "./CaretState";
+declare const __propDef: {
+    props: {
+        context?: CaretState | undefined;
+        executor?: ((command: Command, key: string) => void) | undefined;
+        visible?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ToolbarProps = typeof __propDef.props;
+export declare type ToolbarEvents = typeof __propDef.events;
+export declare type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

package/components/editor/ToolbarGroup.svelte

@@ -0,0 +1,41 @@
+<script>import ToolbarIcon from "./ToolbarIcon.svelte";
+export let linebreak = false;
+export let icon;
+</script>
+
+{#if linebreak }<br/>{/if}
+<span class="bookish-editor-toolbar-group">
+    <ToolbarIcon name={icon}/><slot></slot>
+</span>
+
+<style>
+    .bookish-editor-toolbar-group {
+        display: inline-block;
+        margin-right: calc(2 * var(--bookish-app-chrome-padding));
+        margin-bottom: var(--bookish-app-chrome-padding);
+    }
+
+    .bookish-editor-toolbar-group :global(button) {
+        vertical-align: middle;
+        height: 2.25em;
+    }
+
+    .bookish-editor-toolbar-group :global(button:first-of-type) {
+        border-top-right-radius: 0;
+    }
+
+    .bookish-editor-toolbar-group :global(button:last-child) {
+        border-bottom-left-radius: 0;
+    }
+
+    .bookish-editor-toolbar-group :global(button:not(:first-of-type):not(:last-child)) {
+        border-radius: 0;
+    }
+
+    .bookish-editor-toolbar-group :global(input), 
+    .bookish-editor-toolbar-group :global(select) {
+        margin-left: var(--bookish-app-chrome-padding);
+        margin-right: var(--bookish-app-chrome-padding);
+    }
+
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        linebreak?: boolean | undefined;
+        icon: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToolbarGroupProps = typeof __propDef.props;
+export declare type ToolbarGroupEvents = typeof __propDef.events;
+export declare type ToolbarGroupSlots = typeof __propDef.slots;
+export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
+}
+export {};

package/components/editor/ToolbarIcon.svelte

@@ -0,0 +1,22 @@
+<script>// If ends with .svg, its mapped to an asset in /svg/, otherwise just the text is displayed.
+export let name;
+</script>
+
+<span>
+    {#if name.endsWith(".svg")}
+        <img alt={`${name.replace(".svg", "")} icon`} src="/svg/{name}"/>
+    {:else}
+        {name}
+    {/if}
+</span>
+
+<style>
+    span {
+        margin-right: var(--bookish-app-chrome-padding);
+    }
+
+    img {
+        width: 1em;
+        height: 1em;
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ToolbarIconProps = typeof __propDef.props;
+export declare type ToolbarIconEvents = typeof __propDef.events;
+export declare type ToolbarIconSlots = typeof __propDef.slots;
+export default class ToolbarIcon extends SvelteComponentTyped<ToolbarIconProps, ToolbarIconEvents, ToolbarIconSlots> {
+}
+export {};

package/components/editor/ToolbarSpacer.svelte

@@ -0,0 +1 @@
+<span style="display: inline-block, width: 1em"></span>

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

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  ToolbarSpacerProps */
+/** @typedef {typeof __propDef.events}  ToolbarSpacerEvents */
+/** @typedef {typeof __propDef.slots}  ToolbarSpacerSlots */
+export default class ToolbarSpacer extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ToolbarSpacerProps = typeof __propDef.props;
+export type ToolbarSpacerEvents = typeof __propDef.events;
+export type ToolbarSpacerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/editor/URLEditor.svelte

@@ -0,0 +1,15 @@
+<script>import TextEditor from "./TextEditor.svelte";
+export let url;
+export let validator;
+export let edit;
+</script>
+
+<TextEditor
+    placeholder="url" 
+    startText={url} 
+    label="URL editor"
+    valid={ url => validator(url) }
+    save={ url => edit(url) }
+    width={20}
+    clip={true}
+/>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        url: string;
+        validator: (text: string) => undefined | string;
+        edit: (newURL: string) => string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type UrlEditorProps = typeof __propDef.props;
+export declare type UrlEditorEvents = typeof __propDef.events;
+export declare type UrlEditorSlots = typeof __propDef.slots;
+export default class UrlEditor extends SvelteComponentTyped<UrlEditorProps, UrlEditorEvents, UrlEditorSlots> {
+}
+export {};