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

@@ -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;

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>

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>

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>

ts/editor/FieldsEditor.svelte

@@ -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>

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: 0 3px 1px;
-        padding-bottom: 1px;
 
-        /* slightly wider than EditingArea
+        position: sticky;
-           to cover field borders on scroll */
+        top: 0;
-        left: -1px;
-        right: -1px;
         z-index: 10;
+
         background: var(--label-color);
 
         .clickable {

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,7 +319,6 @@ 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>
@@ -353,9 +350,7 @@ the AddCards dialog) should be implemented in the user of this component.
                     }}
                     on:focusout={() => {
                         $focusedField = null;
-                            bridgeCommand(
+                        bridgeCommand(`blur:${index}:${getNoteId()}:${get(content)}`);
-                                `blur:${index}:${getNoteId()}:${get(content)}`,
-                            );
                     }}
                     on:mouseenter={() => {
                         $hoveredField = fields[index];
@@ -407,9 +402,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                                 !richTextsHidden[index];
 
                                             if (!richTextsHidden[index]) {
-                                                    refocusInput(
+                                                refocusInput(richTextInputs[index].api);
-                                                        richTextInputs[index].api,
-                                                    );
                                             }
                                         }}
                                     />
@@ -489,17 +482,24 @@ the AddCards dialog) should be implemented in the user of this component.
             <FrameElement />
         </DecoratedElements>
     </Fields>
-    </FieldsEditor>
 
-    <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>

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>

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) {

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 {