From 1a8793797365449b7dca9f563ac003ce924839fa Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 12 Sep 2022 11:22:22 +0200
Subject: [PATCH] Fix sticky field labels - Make editor toolbar+tag editor non
 sticky in editor (#2058)

* Add back overflow:hidden to field descriptions

* Add explaining comment

* Put back overflow:hidden in FieldsEditor

* Move inline padding from Fields component but EditorField+LabelContainer

* Simplify editor design by making editor toolbar not sticky

* Make tag editor in note editor non-sticky as well

* Fix merge mess

* The floating elements were portaled because I passed in undefined and they have a default argument

- Fix unrelated to PR
---
 ts/components/WithFloating.svelte             |   2 +-
 ts/editor/EditorField.svelte                  |   1 +
 ts/editor/FieldDescription.svelte             |   5 +
 ts/editor/Fields.svelte                       |  13 +-
 ts/editor/FieldsEditor.svelte                 |  16 -
 ts/editor/LabelContainer.svelte               |  11 +-
 ts/editor/NoteEditor.svelte                   | 330 +++++++++---------
 ts/editor/editor-toolbar/EditorToolbar.svelte |  15 +-
 ts/sveltelib/portal.ts                        |   6 +-
 ts/tag-editor/TagEditor.svelte                |   7 +-
 10 files changed, 205 insertions(+), 201 deletions(-)
 delete mode 100644 ts/editor/FieldsEditor.svelte

diff --git a/ts/components/WithFloating.svelte b/ts/components/WithFloating.svelte
index 6de18e6bc..f0f6955a1 100644
--- a/ts/components/WithFloating.svelte
+++ b/ts/components/WithFloating.svelte
@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import subscribeToUpdates from "../sveltelib/subscribe-updates";
     import FloatingArrow from "./FloatingArrow.svelte";
 
-    export let portalTarget: HTMLElement | undefined = undefined;
+    export let portalTarget: HTMLElement | null = null;
 
     export let placement: Placement | Placement[] | "auto" = "bottom";
     export let offset = 5;
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index f87104cd4..fabf2286e 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -117,6 +117,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .editor-field {
         position: relative;
+        padding: 0 3px;
         --border-color: var(--border);
     }
 </style>
diff --git a/ts/editor/FieldDescription.svelte b/ts/editor/FieldDescription.svelte
index edf38b748..236a3b90c 100644
--- a/ts/editor/FieldDescription.svelte
+++ b/ts/editor/FieldDescription.svelte
@@ -43,5 +43,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         /* Stay a on single line */
         white-space: nowrap;
         text-overflow: ellipsis;
+
+        /* The field description is placed absolutely on top of the editor field */
+        /* So we need to make sure it does not escape the editor field if the */
+        /* description is too long */
+        overflow: hidden;
     }
 </style>
diff --git a/ts/editor/Fields.svelte b/ts/editor/Fields.svelte
index 29bdfa29e..ac8ee48d8 100644
--- a/ts/editor/Fields.svelte
+++ b/ts/editor/Fields.svelte
@@ -2,6 +2,10 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+<!--
+@component
+Contains the fields. This contains the scrollable area.
+-->
 <div class="fields">
     <slot />
 </div>
@@ -12,6 +16,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         grid-auto-rows: min-content;
         grid-gap: 6px;
 
-        padding: 0 3px 5px;
+        /* Add space after the last field and the start of the tag editor */
+        padding-bottom: 5px;
+
+        /* Move the scrollbar for the NoteEditor into this element */
+        overflow-y: auto;
+
+        /* Push the tag editor to the bottom of the note editor */
+        flex-grow: 1;
     }
 </style>
diff --git a/ts/editor/FieldsEditor.svelte b/ts/editor/FieldsEditor.svelte
deleted file mode 100644
index 2a7222088..000000000
--- a/ts/editor/FieldsEditor.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<div class="fields-editor">
-    <slot />
-</div>
-
-<style lang="scss">
-    .fields-editor {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-    }
-</style>
diff --git a/ts/editor/LabelContainer.svelte b/ts/editor/LabelContainer.svelte
index df28d2d5d..b67ed1fbb 100644
--- a/ts/editor/LabelContainer.svelte
+++ b/ts/editor/LabelContainer.svelte
@@ -37,16 +37,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .label-container {
         display: flex;
-        position: sticky;
         justify-content: space-between;
-        top: 0;
-        padding-bottom: 1px;
+        padding: 0 3px 1px;
 
-        /* slightly wider than EditingArea
-           to cover field borders on scroll */
-        left: -1px;
-        right: -1px;
+        position: sticky;
+        top: 0;
         z-index: 10;
+
         background: var(--label-color);
 
         .clickable {
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index bc1e5bf22..0996bfda0 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -44,7 +44,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import Absolute from "../components/Absolute.svelte";
     import Badge from "../components/Badge.svelte";
-    import StickyContainer from "../components/StickyContainer.svelte";
     import { bridgeCommand } from "../lib/bridgecommand";
     import { TagEditor } from "../tag-editor";
     import { ChangeTimer } from "./change-timer";
@@ -56,7 +55,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import EditorField from "./EditorField.svelte";
     import FieldDescription from "./FieldDescription.svelte";
     import Fields from "./Fields.svelte";
-    import FieldsEditor from "./FieldsEditor.svelte";
     import FrameElement from "./FrameElement.svelte";
     import { alertIcon } from "./icons";
     import ImageHandle from "./image-overlay";
@@ -321,185 +319,187 @@ Functionality exclusive to specifc note-editing views (e.g. in the browser or
 the AddCards dialog) should be implemented in the user of this component.
 -->
 <div class="note-editor">
-    <FieldsEditor>
-        <EditorToolbar {size} {wrap} api={toolbar}>
-            <slot slot="notetypeButtons" name="notetypeButtons" />
-        </EditorToolbar>
+    <EditorToolbar {size} {wrap} api={toolbar}>
+        <slot slot="notetypeButtons" name="notetypeButtons" />
+    </EditorToolbar>
 
-        {#if hint}
-            <Absolute bottom right --margin="10px">
-                <Notification>
-                    <Badge --badge-color="tomato" --icon-align="top"
-                        >{@html alertIcon}</Badge
-                    >
-                    <span>{@html hint}</span>
-                </Notification>
-            </Absolute>
-        {/if}
+    {#if hint}
+        <Absolute bottom right --margin="10px">
+            <Notification>
+                <Badge --badge-color="tomato" --icon-align="top"
+                    >{@html alertIcon}</Badge
+                >
+                <span>{@html hint}</span>
+            </Notification>
+        </Absolute>
+    {/if}
 
-        <Fields>
-            <DecoratedElements>
-                {#each fieldsData as field, index}
-                    {@const content = fieldStores[index]}
+    <Fields>
+        <DecoratedElements>
+            {#each fieldsData as field, index}
+                {@const content = fieldStores[index]}
 
-                    <EditorField
-                        {field}
-                        {content}
-                        flipInputs={plainTextDefaults[index]}
-                        api={fields[index]}
-                        on:focusin={() => {
-                            $focusedField = fields[index];
-                            bridgeCommand(`focus:${index}`);
-                        }}
-                        on:focusout={() => {
-                            $focusedField = null;
-                            bridgeCommand(
-                                `blur:${index}:${getNoteId()}:${get(content)}`,
-                            );
-                        }}
-                        on:mouseenter={() => {
-                            $hoveredField = fields[index];
-                        }}
-                        on:mouseleave={() => {
-                            $hoveredField = null;
-                        }}
-                        collapsed={fieldsCollapsed[index]}
-                        --label-color={cols[index] === "dupe"
-                            ? "var(--flag1-bg)"
-                            : "var(--window-bg)"}
-                    >
-                        <svelte:fragment slot="field-label">
-                            <LabelContainer
-                                collapsed={fieldsCollapsed[index]}
-                                on:toggle={async () => {
-                                    fieldsCollapsed[index] = !fieldsCollapsed[index];
+                <EditorField
+                    {field}
+                    {content}
+                    flipInputs={plainTextDefaults[index]}
+                    api={fields[index]}
+                    on:focusin={() => {
+                        $focusedField = fields[index];
+                        bridgeCommand(`focus:${index}`);
+                    }}
+                    on:focusout={() => {
+                        $focusedField = null;
+                        bridgeCommand(`blur:${index}:${getNoteId()}:${get(content)}`);
+                    }}
+                    on:mouseenter={() => {
+                        $hoveredField = fields[index];
+                    }}
+                    on:mouseleave={() => {
+                        $hoveredField = null;
+                    }}
+                    collapsed={fieldsCollapsed[index]}
+                    --label-color={cols[index] === "dupe"
+                        ? "var(--flag1-bg)"
+                        : "var(--window-bg)"}
+                >
+                    <svelte:fragment slot="field-label">
+                        <LabelContainer
+                            collapsed={fieldsCollapsed[index]}
+                            on:toggle={async () => {
+                                fieldsCollapsed[index] = !fieldsCollapsed[index];
 
-                                    const defaultInput = !plainTextDefaults[index]
-                                        ? richTextInputs[index]
-                                        : plainTextInputs[index];
+                                const defaultInput = !plainTextDefaults[index]
+                                    ? richTextInputs[index]
+                                    : plainTextInputs[index];
 
-                                    if (!fieldsCollapsed[index]) {
-                                        refocusInput(defaultInput.api);
-                                    } else if (!plainTextDefaults[index]) {
-                                        plainTextsHidden[index] = true;
-                                    } else {
-                                        richTextsHidden[index] = true;
-                                    }
-                                }}
-                            >
-                                <svelte:fragment slot="field-name">
-                                    <LabelName>
-                                        {field.name}
-                                    </LabelName>
-                                </svelte:fragment>
-                                <FieldState>
-                                    {#if cols[index] === "dupe"}
-                                        <DuplicateLink />
-                                    {/if}
-                                    {#if plainTextDefaults[index]}
-                                        <RichTextBadge
-                                            visible={!fieldsCollapsed[index] &&
-                                                (fields[index] === $hoveredField ||
-                                                    fields[index] === $focusedField)}
-                                            bind:off={richTextsHidden[index]}
-                                            on:toggle={async () => {
-                                                richTextsHidden[index] =
-                                                    !richTextsHidden[index];
+                                if (!fieldsCollapsed[index]) {
+                                    refocusInput(defaultInput.api);
+                                } else if (!plainTextDefaults[index]) {
+                                    plainTextsHidden[index] = true;
+                                } else {
+                                    richTextsHidden[index] = true;
+                                }
+                            }}
+                        >
+                            <svelte:fragment slot="field-name">
+                                <LabelName>
+                                    {field.name}
+                                </LabelName>
+                            </svelte:fragment>
+                            <FieldState>
+                                {#if cols[index] === "dupe"}
+                                    <DuplicateLink />
+                                {/if}
+                                {#if plainTextDefaults[index]}
+                                    <RichTextBadge
+                                        visible={!fieldsCollapsed[index] &&
+                                            (fields[index] === $hoveredField ||
+                                                fields[index] === $focusedField)}
+                                        bind:off={richTextsHidden[index]}
+                                        on:toggle={async () => {
+                                            richTextsHidden[index] =
+                                                !richTextsHidden[index];
 
-                                                if (!richTextsHidden[index]) {
-                                                    refocusInput(
-                                                        richTextInputs[index].api,
-                                                    );
-                                                }
-                                            }}
-                                        />
-                                    {:else}
-                                        <PlainTextBadge
-                                            visible={!fieldsCollapsed[index] &&
-                                                (fields[index] === $hoveredField ||
-                                                    fields[index] === $focusedField)}
-                                            bind:off={plainTextsHidden[index]}
-                                            on:toggle={async () => {
-                                                plainTextsHidden[index] =
-                                                    !plainTextsHidden[index];
-
-                                                if (!plainTextsHidden[index]) {
-                                                    refocusInput(
-                                                        plainTextInputs[index].api,
-                                                    );
-                                                }
-                                            }}
-                                        />
-                                    {/if}
-                                    <slot
-                                        name="field-state"
-                                        {field}
-                                        {index}
-                                        visible={fields[index] === $hoveredField ||
-                                            fields[index] === $focusedField}
+                                            if (!richTextsHidden[index]) {
+                                                refocusInput(richTextInputs[index].api);
+                                            }
+                                        }}
                                     />
-                                </FieldState>
-                            </LabelContainer>
-                        </svelte:fragment>
-                        <svelte:fragment slot="rich-text-input">
-                            <Collapsible
-                                collapse={richTextsHidden[index]}
-                                let:collapsed={hidden}
-                            >
-                                <RichTextInput
-                                    {hidden}
-                                    on:focusout={() => {
-                                        saveFieldNow();
-                                        $focusedInput = null;
-                                    }}
-                                    bind:this={richTextInputs[index]}
-                                >
-                                    <ImageHandle maxWidth={250} maxHeight={125} />
-                                    <MathjaxHandle />
-                                    {#if insertSymbols}
-                                        <SymbolsOverlay />
-                                    {/if}
-                                    <FieldDescription>
-                                        {field.description}
-                                    </FieldDescription>
-                                </RichTextInput>
-                            </Collapsible>
-                        </svelte:fragment>
-                        <svelte:fragment slot="plain-text-input">
-                            <Collapsible
-                                collapse={plainTextsHidden[index]}
-                                let:collapsed={hidden}
-                            >
-                                <PlainTextInput
-                                    {hidden}
-                                    isDefault={plainTextDefaults[index]}
-                                    richTextHidden={richTextsHidden[index]}
-                                    on:focusout={() => {
-                                        saveFieldNow();
-                                        $focusedInput = null;
-                                    }}
-                                    bind:this={plainTextInputs[index]}
+                                {:else}
+                                    <PlainTextBadge
+                                        visible={!fieldsCollapsed[index] &&
+                                            (fields[index] === $hoveredField ||
+                                                fields[index] === $focusedField)}
+                                        bind:off={plainTextsHidden[index]}
+                                        on:toggle={async () => {
+                                            plainTextsHidden[index] =
+                                                !plainTextsHidden[index];
+
+                                            if (!plainTextsHidden[index]) {
+                                                refocusInput(
+                                                    plainTextInputs[index].api,
+                                                );
+                                            }
+                                        }}
+                                    />
+                                {/if}
+                                <slot
+                                    name="field-state"
+                                    {field}
+                                    {index}
+                                    visible={fields[index] === $hoveredField ||
+                                        fields[index] === $focusedField}
                                 />
-                            </Collapsible>
-                        </svelte:fragment>
-                    </EditorField>
-                {/each}
+                            </FieldState>
+                        </LabelContainer>
+                    </svelte:fragment>
+                    <svelte:fragment slot="rich-text-input">
+                        <Collapsible
+                            collapse={richTextsHidden[index]}
+                            let:collapsed={hidden}
+                        >
+                            <RichTextInput
+                                {hidden}
+                                on:focusout={() => {
+                                    saveFieldNow();
+                                    $focusedInput = null;
+                                }}
+                                bind:this={richTextInputs[index]}
+                            >
+                                <ImageHandle maxWidth={250} maxHeight={125} />
+                                <MathjaxHandle />
+                                {#if insertSymbols}
+                                    <SymbolsOverlay />
+                                {/if}
+                                <FieldDescription>
+                                    {field.description}
+                                </FieldDescription>
+                            </RichTextInput>
+                        </Collapsible>
+                    </svelte:fragment>
+                    <svelte:fragment slot="plain-text-input">
+                        <Collapsible
+                            collapse={plainTextsHidden[index]}
+                            let:collapsed={hidden}
+                        >
+                            <PlainTextInput
+                                {hidden}
+                                isDefault={plainTextDefaults[index]}
+                                richTextHidden={richTextsHidden[index]}
+                                on:focusout={() => {
+                                    saveFieldNow();
+                                    $focusedInput = null;
+                                }}
+                                bind:this={plainTextInputs[index]}
+                            />
+                        </Collapsible>
+                    </svelte:fragment>
+                </EditorField>
+            {/each}
 
-                <MathjaxElement />
-                <FrameElement />
-            </DecoratedElements>
-        </Fields>
-    </FieldsEditor>
+            <MathjaxElement />
+            <FrameElement />
+        </DecoratedElements>
+    </Fields>
 
-    <StickyContainer --gutter-block="0.1rem" --sticky-borders="1px 0 0" class="d-flex">
+    <div class="note-editor-tag-editor">
         <TagEditor {tags} on:tagsupdate={saveTags} />
-    </StickyContainer>
+    </div>
 </div>
 
 <style lang="scss">
     .note-editor {
-        height: 100%;
         display: flex;
         flex-direction: column;
+        height: 100%;
+    }
+
+    .note-editor-tag-editor {
+        padding: 2px 0 0;
+
+        border-width: thin 0 0;
+        border-style: solid;
+        border-color: var(--medium-border);
     }
 </style>
diff --git a/ts/editor/editor-toolbar/EditorToolbar.svelte b/ts/editor/editor-toolbar/EditorToolbar.svelte
index bf911fbef..3c3986835 100644
--- a/ts/editor/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor/editor-toolbar/EditorToolbar.svelte
@@ -53,7 +53,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonToolbar from "../../components/ButtonToolbar.svelte";
     import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
     import Item from "../../components/Item.svelte";
-    import StickyContainer from "../../components/StickyContainer.svelte";
     import BlockButtons from "./BlockButtons.svelte";
     import InlineButtons from "./InlineButtons.svelte";
     import NotetypeButtons from "./NotetypeButtons.svelte";
@@ -85,7 +84,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setContextProperty(api);
 </script>
 
-<StickyContainer --gutter-block="0.1rem" --sticky-borders="0 0 1px">
+<div class="editor-toolbar">
     <ButtonToolbar {size} {wrap}>
         <DynamicallySlottable slotHost={Item} api={toolbar}>
             <Item id="notetype">
@@ -111,4 +110,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </Item>
         </DynamicallySlottable>
     </ButtonToolbar>
-</StickyContainer>
+</div>
+
+<style lang="scss">
+    .editor-toolbar {
+        padding: 0 0 2px;
+
+        border-width: 0 0 thin;
+        border-style: solid;
+        border-color: var(--medium-border);
+    }
+</style>
diff --git a/ts/sveltelib/portal.ts b/ts/sveltelib/portal.ts
index 8f045942f..e0de44ee2 100644
--- a/ts/sveltelib/portal.ts
+++ b/ts/sveltelib/portal.ts
@@ -7,11 +7,11 @@
  */
 function portal(
     element: HTMLElement,
-    targetElement: Element = document.body,
+    targetElement: Element | null = document.body,
 ): { update(target: Element): void; destroy(): void } {
-    let target: Element;
+    let target: Element | null;
 
-    async function update(newTarget: Element) {
+    async function update(newTarget: Element | null) {
         target = newTarget;
 
         if (!target) {
diff --git a/ts/tag-editor/TagEditor.svelte b/ts/tag-editor/TagEditor.svelte
index c2ceb6d6b..9438395ec 100644
--- a/ts/tag-editor/TagEditor.svelte
+++ b/ts/tag-editor/TagEditor.svelte
@@ -382,7 +382,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: anyTagsSelected = tagTypes.some((tag) => tag.selected);
 </script>
 
-<div class="tag-editor-area" on:focusout={deselectIfLeave} bind:offsetHeight={height}>
+<div class="tag-editor" on:focusout={deselectIfLeave} bind:offsetHeight={height}>
     <TagOptionsButton
         bind:badgeHeight
         tagsSelected={anyTagsSelected}
@@ -483,13 +483,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    .tag-editor-area {
+    .tag-editor {
         display: flex;
         flex-flow: row wrap;
         align-items: flex-end;
-        padding: 0 1px 1px;
-        overflow: hidden;
-        margin-bottom: 3px;
     }
 
     .tag-relative {