From ee0cfc25e286a75454d65b97879f765dc0bd5d2b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Sep 2022 00:29:36 +0200
Subject: [PATCH] Use elevation + overflow:hidden  in Editorfield

---
 sass/elevation.scss                           | 10 +++--
 ts/editor/EditingArea.svelte                  | 26 -------------
 ts/editor/EditorField.svelte                  | 21 +++++++++-
 ts/editor/NoteEditor.svelte                   |  2 -
 .../plain-text-input/PlainTextInput.svelte    | 27 -------------
 .../rich-text-input/RichTextInput.svelte      | 39 ++++++++++---------
 6 files changed, 47 insertions(+), 78 deletions(-)

diff --git a/sass/elevation.scss b/sass/elevation.scss
index b543844c6..ccf796bae 100644
--- a/sass/elevation.scss
+++ b/sass/elevation.scss
@@ -59,7 +59,7 @@ $umbra-opacity: 0.2;
 $penumbra-opacity: 0.14;
 $ambient-opacity: 0.12;
 
-@function box-shadow($level, $opacity-boost: 0, $color: black) {
+@function box-shadow($level, $opacity-boost, $color) {
     $umbra-z-value: map.get($umbra-map, $level);
     $penumbra-z-value: map.get($penumbra-map, $level);
     $ambient-z-value: map.get($ambient-map, $level);
@@ -75,6 +75,10 @@ $ambient-opacity: 0.12;
     );
 }
 
-@mixin elevation($level, $other: ()) {
-    box-shadow: list.join(box-shadow($level), $other);
+@mixin elevation($level, $opacity-boost: 0, $color: black) {
+    box-shadow: box-shadow($level, $opacity-boost, $color);
+}
+
+@mixin elevation-transition() {
+    transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
 }
diff --git a/ts/editor/EditingArea.svelte b/ts/editor/EditingArea.svelte
index da5dfd0f9..e2a9df71a 100644
--- a/ts/editor/EditingArea.svelte
+++ b/ts/editor/EditingArea.svelte
@@ -186,31 +186,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: grid;
         /* TODO allow configuration of grid #1503 */
         /* grid-template-columns: repeat(2, 1fr); */
-
-        position: relative;
-        background: var(--frame-bg);
-        border-radius: 5px;
-        border: 1px solid var(--border);
-
-        box-shadow: 0px 0px 2px 0px var(--border);
-        transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
-
-        &:focus-within {
-            outline: none;
-
-            /* This pseudo-element is required to display
-               the inset box-shadow above field contents */
-            &::after {
-                content: "";
-                position: absolute;
-                top: -1px;
-                right: -1px;
-                bottom: -1px;
-                left: -1px;
-                pointer-events: none;
-                border-radius: 5px;
-                box-shadow: inset 0 0 0 2px var(--focus-border);
-            }
-        }
     }
 </style>
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index fabf2286e..5c824f05c 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -115,9 +115,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </Collapsible>
 
 <style lang="scss">
+    @use "sass/elevation" as elevation;
+
     .editor-field {
-        position: relative;
-        padding: 0 3px;
+        overflow: hidden;
+        margin: 0 3px;
+
         --border-color: var(--border);
+
+        border-radius: 5px;
+        border: 1px solid var(--border);
+
+        @include elevation.elevation-transition;
+        @include elevation.elevation(1);
+
+        &:focus-within {
+            @include elevation.elevation(
+                2,
+                $color: rgb(59 130 246),
+                $opacity-boost: 0.2
+            );
+        }
     }
 </style>
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 8b3bb2dcf..bc189d617 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -460,8 +460,6 @@ the AddCards dialog) should be implemented in the user of this component.
                         >
                             <PlainTextInput
                                 {hidden}
-                                isDefault={plainTextDefaults[index]}
-                                richTextHidden={richTextsHidden[index]}
                                 on:focusout={() => {
                                     saveFieldNow();
                                     $focusedInput = null;
diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte
index 4a495583c..bffdc4057 100644
--- a/ts/editor/plain-text-input/PlainTextInput.svelte
+++ b/ts/editor/plain-text-input/PlainTextInput.svelte
@@ -39,9 +39,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import removeProhibitedTags from "./remove-prohibited";
     import { storedToUndecorated, undecoratedToStored } from "./transform";
 
-    export let isDefault: boolean;
     export let hidden = false;
-    export let richTextHidden: boolean;
 
     const configuration = {
         mode: htmlanki,
@@ -145,8 +143,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div
     class="plain-text-input"
     class:light-theme={!$pageTheme.isDark}
-    class:is-default={isDefault}
-    class:alone={richTextHidden}
     on:focusin={() => ($focusedInput = api)}
     {hidden}
 >
@@ -161,31 +157,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .plain-text-input {
-        border-top: 1px solid var(--border);
-        border-radius: 0 0 5px 5px;
-
         :global(.CodeMirror) {
             background: var(--code-bg);
-            border-radius: 0 0 5px 5px;
-        }
-
-        &.is-default {
-            border-top: none;
-            border-bottom: 1px solid var(--border);
-            border-radius: 5px 5px 0 0;
-
-            :global(.CodeMirror) {
-                border-radius: 5px 5px 0 0;
-            }
-        }
-
-        &.alone {
-            border: none;
-            border-radius: 5px;
-
-            :global(.CodeMirror) {
-                border-radius: 5px;
-            }
         }
 
         :global(.CodeMirror-lines) {
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index 0196b4258..7b55c8355 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -127,7 +127,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return hidden;
     }
 
-    const className = "rich-text-editable";
     let richTextDiv: HTMLElement;
 
     async function getInputAPI(target: EventTarget): Promise<FocusableInputAPI | null> {
@@ -222,29 +221,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         let:attachToShadow={attachStyles}
         let:stylesDidLoad
     >
-        <div
-            bind:this={richTextDiv}
-            class={className}
-            class:night-mode={$pageTheme.isDark}
-            use:attachShadow
-            use:attachStyles
-            use:attachContentEditable={{ stylesDidLoad }}
-            on:focusin
-            on:focusout
-        />
+        <div class="rich-text-relative">
+            <div
+                class="rich-text-editable"
+                bind:this={richTextDiv}
+                use:attachShadow
+                use:attachStyles
+                use:attachContentEditable={{ stylesDidLoad }}
+                on:focusin
+                on:focusout
+            />
 
-        {#await Promise.all([richTextPromise, stylesDidLoad]) then _}
-            <div class="rich-text-widgets">
-                <slot />
-            </div>
-        {/await}
+            {#await Promise.all([richTextPromise, stylesDidLoad]) then _}
+                <div class="rich-text-widgets">
+                    <slot />
+                </div>
+            {/await}
+        </div>
     </RichTextStyles>
-    <slot name="plain-text-badge" />
 </div>
 
 <style lang="scss">
     .rich-text-input {
+        background-color: white;
+        padding: 6px;
+    }
+
+    .rich-text-relative {
         position: relative;
-        margin: 6px;
     }
 </style>