Move field description into EditingArea as placeholder

ftl/core/fields.ftl

@@ -4,7 +4,7 @@ fields-editing-font = Editing Font
 fields-field = Field:
 fields-field-name = Field name:
 fields-description = Description
-fields-description-placeholder = Tooltip to show next to the field's name in the editing screen
+fields-description-placeholder = Placeholder to show inside the field when it's empty
 fields-fields-for = Fields for { $val }
 fields-font = Font:
 fields-new-position-1 = New position (1...{ $val }):

ts/editable/ContentEditable.svelte

@@ -7,7 +7,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import type { Writable } from "svelte/store";
+    import { getContext } from "svelte";
+    import type { Readable, Writable } from "svelte/store";
 
     import { updateAllState } from "../components/WithState.svelte";
     import actionList from "../sveltelib/action-list";
@@ -15,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { SetupInputHandlerAction } from "../sveltelib/input-handler";
     import type { ContentEditableAPI } from "./content-editable";
     import { preventBuiltinShortcuts, useFocusHandler } from "./content-editable";
+    import { descriptionKey } from "../lib/context-keys";
 
     export let resolve: (editable: HTMLElement) => void;
 
@@ -33,6 +35,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const [focusHandler, setupFocusHandling] = useFocusHandler();
 
     Object.assign(api, { focusHandler });
+
+    const description = getContext<Readable<string>>(descriptionKey);
+    $: descriptionCSSValue = `"${$description}"`;
 </script>
 
 <anki-editable
@@ -46,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:blur
     on:click={updateAllState}
     on:keyup={updateAllState}
+    style="--description: {descriptionCSSValue}"
 />
 
 <style lang="scss">
@@ -60,6 +66,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         &:focus {
             outline: none;
         }
+        &:empty::after {
+            content: var(--description);
+            opacity: 0.4;
+            cursor: text;
+        }
     }
 
     /* editable-base.scss contains styling targeting user HTML */

ts/editor/EditingArea.svelte

@@ -49,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext as svelteSetContext, tick } from "svelte";
     import { writable } from "svelte/store";
 
-    import { fontFamilyKey, fontSizeKey } from "../lib/context-keys";
+    import { fontFamilyKey, fontSizeKey, descriptionKey } from "../lib/context-keys";
     import FocusTrap from "./FocusTrap.svelte";
 
     export let fontFamily: string;
@@ -62,6 +62,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: $fontSizeStore = fontSize;
     svelteSetContext(fontSizeKey, fontSizeStore);
 
+    export let description: string;
+    const descriptionStore = writable(description);
+    $: $descriptionStore = description;
+    svelteSetContext(descriptionKey, descriptionStore);
+
     export let content: Writable<string>;
 
     let editingArea: HTMLElement;

ts/editor/EditorField.svelte

@@ -10,10 +10,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export interface FieldData {
         name: string;
-        description: string;
         fontFamily: string;
         fontSize: number;
         direction: "ltr" | "rtl";
+        description: string;
     }
 
     export interface EditorFieldAPI {
@@ -33,13 +33,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
 
-    import { directionKey } from "../lib/context-keys";
+    import { directionKey, descriptionKey } from "../lib/context-keys";
     import { promiseWithResolver } from "../lib/promise";
     import type { Destroyable } from "./destroyable";
     import EditingArea from "./EditingArea.svelte";
     import FieldState from "./FieldState.svelte";
     import LabelContainer from "./LabelContainer.svelte";
-    import LabelDescription from "./LabelDescription.svelte";
     import LabelName from "./LabelName.svelte";
 
     export let content: Writable<string>;
@@ -50,6 +49,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: $directionStore = field.direction;
 
+    const descriptionStore = writable<string>();
+    setContext(descriptionKey, descriptionStore);
+
+    $: $descriptionStore = field.description;
+
     const editingArea: Partial<EditingAreaAPI> = {};
     const [element, elementResolve] = promiseWithResolver<HTMLElement>();
 
@@ -79,9 +83,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <LabelName>
                 {field.name}
             </LabelName>
-            {#if field.description}
-                <LabelDescription description={field.description} />
-            {/if}
         </span>
         <FieldState><slot name="field-state" /></FieldState>
     </LabelContainer>
@@ -89,6 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {content}
         fontFamily={field.fontFamily}
         fontSize={field.fontSize}
+        description={field.description}
         api={editingArea}
     >
         <slot name="editing-inputs" />

ts/editor/LabelDescription.svelte

@@ -1,39 +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 Badge from "../components/Badge.svelte";
-    import WithTooltip from "../components/WithTooltip.svelte";
-    import { descriptionIcon } from "./icons";
-
-    export let description: string;
-</script>
-
-<span>
-    <WithTooltip
-        tooltip={description}
-        showDelay={250}
-        offset={[0, 20]}
-        placement="right"
-        let:createTooltip
-    >
-        <Badge
-            --icon-align="sub"
-            iconSize={65}
-            on:mount={(event) => createTooltip(event.detail.span)}
-        >
-            {@html descriptionIcon}
-        </Badge>
-    </WithTooltip>
-</span>
-
-<style lang="scss">
-    span {
-        opacity: 0.4;
-
-        &:hover {
-            opacity: 0.8;
-        }
-    }
-</style>

ts/editor/icons.ts

@@ -12,4 +12,3 @@ export { default as richTextOn } from "@mdi/svg/svg/eye-outline.svg";
 export { default as stickyOff } from "@mdi/svg/svg/pin-off-outline.svg";
 export { default as stickyOn } from "@mdi/svg/svg/pin-outline.svg";
 export { default as htmlOff } from "@mdi/svg/svg/xml.svg";
-export { default as descriptionIcon } from "bootstrap-icons/icons/info-circle.svg";

ts/lib/context-keys.ts

@@ -4,3 +4,4 @@
 export const fontFamilyKey = Symbol("fontFamily");
 export const fontSizeKey = Symbol("fontSize");
 export const directionKey = Symbol("direction");
+export const descriptionKey = Symbol("description");