From 03fe2385efb00dcbcd513f9cc5bb1b9fdea91972 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sat, 5 Nov 2022 01:58:04 +0100
Subject: [PATCH] Fix HTML editor not showing content initially (#2181)

* Fix HTML editor not showing initially

* Remove line numbers from PlainTextInput
---
 ts/components/Collapsible.svelte                 | 14 ++++++++++----
 ts/editor/CodeMirror.svelte                      |  1 +
 ts/editor/plain-text-input/PlainTextInput.svelte |  5 +++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ts/components/Collapsible.svelte b/ts/components/Collapsible.svelte
index ce85322ba..4efb2257d 100644
--- a/ts/components/Collapsible.svelte
+++ b/ts/components/Collapsible.svelte
@@ -11,7 +11,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let toggleDisplay = false;
     export let animated = !document.body.classList.contains("reduced-motion");
 
-    let collapsed = false;
     let contentHeight = 0;
 
     function dynamicDuration(height: number): number {
@@ -56,6 +55,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: height = $size * contentHeight;
     $: transitioning = $size > 0 && !(collapsed || expanded);
     $: measuring = !(collapsed || transitioning || expanded);
+
+    let hidden = collapsed;
+
+    $: {
+        /* await changes dependent on collapsed state */
+        tick().then(() => (hidden = collapsed));
+    }
 </script>
 
 <div
@@ -64,9 +70,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:animated
     class:expanded
     class:full-hide={toggleDisplay}
-    class:collapsed={!expanded}
     class:measuring
     class:transitioning
+    class:hidden
     style:--height="{height}px"
 >
     <slot {collapsed} />
@@ -80,7 +86,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .collapsible.animated {
         &.measuring {
-            display: unset;
+            display: initial;
             position: absolute;
             opacity: 0;
         }
@@ -94,7 +100,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         &.full-hide {
-            &.collapsed {
+            &.hidden {
                 display: none;
             }
             &.transitioning {
diff --git a/ts/editor/CodeMirror.svelte b/ts/editor/CodeMirror.svelte
index ee20ec677..021d6f28d 100644
--- a/ts/editor/CodeMirror.svelte
+++ b/ts/editor/CodeMirror.svelte
@@ -34,6 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const defaultConfiguration = {
         rtlMoveVisually: true,
+        lineNumbers: false,
     };
 
     const [editorPromise, resolve] = promiseWithResolver<CodeMirrorLib.Editor>();
diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte
index 70ddb8125..c1bf0170a 100644
--- a/ts/editor/plain-text-input/PlainTextInput.svelte
+++ b/ts/editor/plain-text-input/PlainTextInput.svelte
@@ -164,10 +164,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         :global(.CodeMirror) {
             height: 100%;
             background: var(--canvas-code);
+            padding-inline: 4px;
         }
 
         :global(.CodeMirror-lines) {
             padding: 8px 0;
         }
+
+        :global(.CodeMirror-gutters) {
+            background: var(--canvas-code);
+        }
     }
 </style>