From 604e0f46e1b234991488a701801435b8b3fa6692 Mon Sep 17 00:00:00 2001
From: Hikaru Y <hkrysg@gmail.com>
Date: Fri, 13 Jan 2023 22:18:25 +0900
Subject: [PATCH] Fix and refactor image size constraints (#2318)

* Remove 'ResizableImage.svelte'

Rather than having a svelte file that just sets global styles, it's
better to set those in a (s)css file.

* Fix and refactor image size constraints

- Fixes https://forums.ankiweb.net/t/2-1-56-image-size-problem-in-editor/26207
- Use :host-context() to switch image styles instead of toggling CSS
variables.

* Fix toolbar buttons for image overlay sometimes being cut off
---
 ts/editable/ResizableImage.svelte           | 19 ---------
 ts/editable/editable-base.scss              | 15 +++++++
 ts/editable/index.ts                        |  1 -
 ts/editor/image-overlay/ImageOverlay.svelte | 44 +++++++--------------
 4 files changed, 29 insertions(+), 50 deletions(-)
 delete mode 100644 ts/editable/ResizableImage.svelte

diff --git a/ts/editable/ResizableImage.svelte b/ts/editable/ResizableImage.svelte
deleted file mode 100644
index a95299793..000000000
--- a/ts/editable/ResizableImage.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<style lang="scss">
-    :global(img:not(.mathjax)) {
-        max-width: var(--editor-default-max-width, inherit);
-        max-height: var(--editor-default-max-height, inherit);
-
-        &:is([data-editor-shrink="true"]) {
-            max-width: var(--editor-shrink-max-width);
-            max-height: var(--editor-shrink-max-height);
-        }
-        &:is([data-editor-shrink="false"]) {
-            max-width: initial;
-            max-height: initial;
-        }
-    }
-</style>
diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss
index de754052e..54e9ef72c 100644
--- a/ts/editable/editable-base.scss
+++ b/ts/editable/editable-base.scss
@@ -26,3 +26,18 @@ p {
 pre {
     white-space: pre-wrap;
 }
+
+// image size constraints
+img:not(.mathjax) {
+    &:not([data-editor-shrink="false"]) {
+        :host-context(.shrink-image) & {
+            max-width: var(--editor-default-max-width);
+            max-height: var(--editor-default-max-height);
+        }
+    }
+
+    &[data-editor-shrink="true"] {
+        max-width: var(--editor-shrink-max-width);
+        max-height: var(--editor-shrink-max-height);
+    }
+}
diff --git a/ts/editable/index.ts b/ts/editable/index.ts
index e9fbef038..b44eb6435 100644
--- a/ts/editable/index.ts
+++ b/ts/editable/index.ts
@@ -5,4 +5,3 @@ import "./editable-base.scss";
 /* only imported for the CSS */
 import "./ContentEditable.svelte";
 import "./Mathjax.svelte";
-import "./ResizableImage.svelte";
diff --git a/ts/editor/image-overlay/ImageOverlay.svelte b/ts/editor/image-overlay/ImageOverlay.svelte
index 0178b2609..759e7dca3 100644
--- a/ts/editor/image-overlay/ImageOverlay.svelte
+++ b/ts/editor/image-overlay/ImageOverlay.svelte
@@ -24,25 +24,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HandleControl from "../HandleControl.svelte";
     import HandleLabel from "../HandleLabel.svelte";
     import { context } from "../NoteEditor.svelte";
-    import type { RichTextInputAPI } from "../rich-text-input";
-    import {
-        editingInputIsRichText,
-        lifecycle as richTextLifecycle,
-    } from "../rich-text-input";
+    import { editingInputIsRichText } from "../rich-text-input";
     import FloatButtons from "./FloatButtons.svelte";
     import SizeSelect from "./SizeSelect.svelte";
 
     export let maxWidth: number;
     export let maxHeight: number;
 
-    richTextLifecycle.onMount(({ element }: RichTextInputAPI): void => {
-        (async () => {
-            const container = await element;
+    (<[string, number][]>[
+        ["--editor-shrink-max-width", maxWidth],
+        ["--editor-shrink-max-height", maxHeight],
+        ["--editor-default-max-width", maxWidth],
+        ["--editor-default-max-height", maxHeight],
+    ]).forEach(([prop, value]) =>
+        document.documentElement.style.setProperty(prop, `${value}px`),
+    );
 
-            container.style.setProperty("--editor-shrink-max-width", `${maxWidth}px`);
-            container.style.setProperty("--editor-shrink-max-height", `${maxHeight}px`);
-        })();
-    });
+    $: document.documentElement.classList.toggle(
+        "shrink-image",
+        $shrinkImagesByDefault,
+    );
 
     const { focusedInput } = context.get();
 
@@ -83,24 +84,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    $: {
-        if ($shrinkImagesByDefault) {
-            document.documentElement.style.setProperty(
-                "--editor-default-max-width",
-                `${maxWidth}px`,
-            );
-            document.documentElement.style.setProperty(
-                "--editor-default-max-height",
-                `${maxHeight}px`,
-            );
-        } else {
-            document.documentElement.style.removeProperty("--editor-default-max-width");
-            document.documentElement.style.removeProperty(
-                "--editor-default-max-height",
-            );
-        }
-    }
-
     async function resetHandle(): Promise<void> {
         activeImage = null;
         await tick();
@@ -265,6 +248,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 offset={20}
                 inline
                 hideIfReferenceHidden
+                portalTarget={document.body}
                 let:position={positionFloating}
                 on:close={async ({ detail }) => {
                     const { reason, originalEvent } = detail;