From fdfdd67c3ab865f79d6b1f2e75c1353aed117e68 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 23 Nov 2022 07:37:12 +0100
Subject: [PATCH] Revert to pseudo-element approach for field description
 (#2209)

* Revert to pseudo-element approach for field description

to ensure it changes on update.

* Simplify CSS
---
 ts/editor/FieldDescription.svelte             | 52 -------------------
 ts/editor/NoteEditor.svelte                   |  9 ++--
 .../rich-text-input/RichTextInput.svelte      | 13 +++++
 3 files changed, 16 insertions(+), 58 deletions(-)
 delete mode 100644 ts/editor/FieldDescription.svelte

diff --git a/ts/editor/FieldDescription.svelte b/ts/editor/FieldDescription.svelte
deleted file mode 100644
index b45a9ac6c..000000000
--- a/ts/editor/FieldDescription.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { getContext } from "svelte";
-    import type { Readable } from "svelte/store";
-
-    import { directionKey, fontFamilyKey, fontSizeKey } from "../lib/context-keys";
-    import { context } from "./EditingArea.svelte";
-
-    const { content } = context.get();
-
-    const fontFamily = getContext<Readable<string>>(fontFamilyKey);
-    const fontSize = getContext<Readable<number>>(fontSizeKey);
-    const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);
-
-    $: empty = $content.length === 0;
-</script>
-
-{#if empty}
-    <div
-        class="field-description"
-        style:font-family={$fontFamily}
-        style:font-size="{$fontSize}px"
-        style:direction={$direction}
-    >
-        <slot />
-    </div>
-{/if}
-
-<style>
-    .field-description {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-
-        color: var(--fg-subtle);
-        pointer-events: none;
-
-        /* 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/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index d7889775d..d133fdac9 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -57,7 +57,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import EditorToolbar from "./editor-toolbar";
     import type { FieldData } from "./EditorField.svelte";
     import EditorField from "./EditorField.svelte";
-    import FieldDescription from "./FieldDescription.svelte";
     import Fields from "./Fields.svelte";
     import { alertIcon } from "./icons";
     import ImageOverlay from "./image-overlay";
@@ -437,6 +436,8 @@ the AddCards dialog) should be implemented in the user of this component.
                         }}
                         collapsed={fieldsCollapsed[index]}
                         dupe={cols[index] === "dupe"}
+                        --description-font-size="{field.fontSize}px"
+                        --description-content={`"${field.description}"`}
                     >
                         <svelte:fragment slot="field-label">
                             <LabelContainer
@@ -524,11 +525,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                         $focusedInput = null;
                                     }}
                                     bind:this={richTextInputs[index]}
-                                >
-                                    <FieldDescription>
-                                        {field.description}
-                                    </FieldDescription>
-                                </RichTextInput>
+                                />
                             </Collapsible>
                         </svelte:fragment>
                         <svelte:fragment slot="plain-text-input">
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index 8147d8fa2..57d114dd1 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -224,6 +224,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <div class="rich-text-relative">
             <div
                 class="rich-text-editable"
+                class:empty={$content.length === 0}
                 bind:this={richTextDiv}
                 use:attachShadow
                 use:attachStyles
@@ -252,4 +253,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .rich-text-relative {
         position: relative;
     }
+
+    .rich-text-editable.empty::before {
+        position: absolute;
+        color: var(--fg-subtle);
+        content: var(--description-content);
+        font-size: var(--description-font-size, 20px);
+        cursor: text;
+        max-width: 95%;
+        overflow-x: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 </style>