From 2c91917e4a3c5e269be69ec5884a9911c0f37b9f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 1 Aug 2022 01:52:34 +0200
Subject: [PATCH] Add field description directly in NoteEditor

---
 ts/editor/FieldDescription.svelte | 22 ++++++++++++++++++++++
 ts/editor/NoteEditor.svelte       |  4 ++++
 2 files changed, 26 insertions(+)
 create mode 100644 ts/editor/FieldDescription.svelte

diff --git a/ts/editor/FieldDescription.svelte b/ts/editor/FieldDescription.svelte
new file mode 100644
index 000000000..f8b1fd731
--- /dev/null
+++ b/ts/editor/FieldDescription.svelte
@@ -0,0 +1,22 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<div class="field-description">
+    <slot />
+</div>
+
+<style>
+    .field-description {
+        opacity: 0.4;
+        cursor: text;
+        /* same as in ContentEditable */
+        padding: 6px;
+        /* stay a on single line */
+        position: absolute;
+        max-width: 95%;
+        overflow-x: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+</style>
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 8aa9261fb..00d9bd71f 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -49,6 +49,7 @@ 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 FieldsEditor from "./FieldsEditor.svelte";
     import FrameElement from "./FrameElement.svelte";
@@ -361,6 +362,9 @@ the AddCards dialog) should be implemented in the user of this component.
                             >
                                 <ImageHandle maxWidth={250} maxHeight={125} />
                                 <MathjaxHandle />
+                                <FieldDescription>
+                                    {fieldDescriptions[index]}
+                                </FieldDescription>
                             </RichTextInput>
 
                             <PlainTextInput