From bc5633e0700f8217c90d69ad6d39ea661d6ad57e Mon Sep 17 00:00:00 2001
From: Hikaru Y <hkrysg@gmail.com>
Date: Tue, 21 Jun 2022 09:12:00 +0900
Subject: [PATCH] Fix field description not toggled properly (#1919)

It appears that a variable bound to the `innerHTML` property of
a contenteditable element is only updated when `input` event fires on
the element, and not when changes are made to the DOM programmatically.
---
 ts/editable/ContentEditable.svelte             | 6 ++----
 ts/editor/rich-text-input/RichTextInput.svelte | 1 +
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/ts/editable/ContentEditable.svelte b/ts/editable/ContentEditable.svelte
index 25ad000d6..c75a0c094 100644
--- a/ts/editable/ContentEditable.svelte
+++ b/ts/editable/ContentEditable.svelte
@@ -39,14 +39,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const description = getContext<Readable<string>>(descriptionKey);
     $: descriptionCSSValue = `"${$description}"`;
 
-    let innerHTML = "";
-    $: empty = ["", "<br>"].includes(innerHTML);
+    export let content: Writable<string>;
 </script>
 
 <anki-editable
-    class:empty
+    class:empty={!$content}
     contenteditable="true"
-    bind:innerHTML
     use:resolve
     use:setupFocusHandling
     use:preventBuiltinShortcuts
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index c5363d56f..a817af755 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -148,6 +148,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     mirrors: [mirror],
                     inputHandlers: [setupInputHandler, setupGlobalInputHandler],
                     api: api.editable,
+                    content,
                 },
                 context: allContexts,
             });