From 4fab6976d11eab71a9ec04cfadf8661b80fa0fda Mon Sep 17 00:00:00 2001
From: Pillar Cat <149342718+pillar-cat@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:42:11 +0800
Subject: [PATCH] fix: editor's image cannot be resized proportionally (#4993)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--  Thanks for sending a pull request!  Here are some tips for you:
1. 如果这是你的第一次，请阅读我们的贡献指南：<https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>。
1. If this is your first time, please read our contributor guidelines: <https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>.
2. 请根据你解决问题的类型为 Pull Request 添加合适的标签。
2. Please label this pull request according to what type of issue you are addressing, especially if this is a release targeted pull request.
3. 请确保你已经添加并运行了适当的测试。
3. Ensure you have added or ran the appropriate tests for your PR.
-->

#### What type of PR is this?

/kind bug
/area editor

<!--
添加其中一个类别：
Add one of the following kinds:

/kind bug
/kind cleanup
/kind documentation
/kind feature
/kind improvement

适当添加其中一个或多个类别（可选）：
Optionally add one or more of the following kinds if applicable:

/kind api-change
/kind deprecation
/kind failing-test
/kind flake
/kind regression
-->

#### What this PR does / why we need it:
修复#4985 中调整图片大小时的高度变化bug
#### Which issue(s) this PR fixes:

<!--
PR 合并时自动关闭 issue。
Automatically closes linked issue when PR is merged.

用法：`Fixes #<issue 号>`，或者 `Fixes (粘贴 issue 完整链接)`
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
-->
Fixes #4985

#### Special notes for your reviewer:
似乎是因为横纵比aspectRatio在调整大小的doDrag函数中被动态的更新数值，导致依赖aspectRatio来计算的高度也会出现问题。直接把aspectRatio移动到函数外，只在挂载后更新一次值即可解决。

#### Does this PR introduce a user-facing change?
<!--
如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。
否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change），
Release Note 需要以 `action required` 开头。
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->

```release-note
这会修复当前console的editor中图片比例拉伸的bug
```
---
 .../editor/src/extensions/image/ImageView.vue    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/console/packages/editor/src/extensions/image/ImageView.vue b/console/packages/editor/src/extensions/image/ImageView.vue
index dc3e92077..837f5e748 100644
--- a/console/packages/editor/src/extensions/image/ImageView.vue
+++ b/console/packages/editor/src/extensions/image/ImageView.vue
@@ -50,9 +50,17 @@ function handleSetFocus() {
   props.editor.commands.setNodeSelection(props.getPos());
 }
 
+const aspectRatio = ref<number>(0);
 const inputRef = ref();
 const resizeRef = ref<HTMLDivElement>();
 
+function onImageLoaded() {
+  if (!resizeRef.value) return;
+
+  aspectRatio.value =
+    resizeRef.value.clientWidth / resizeRef.value.clientHeight;
+}
+
 onMounted(() => {
   if (!src.value) {
     inputRef.value.focus();
@@ -73,20 +81,17 @@ onMounted(() => {
   function doDrag(e: MouseEvent) {
     if (!resizeRef.value) return;
 
-    const aspectRatio =
-      resizeRef.value.clientWidth / resizeRef.value.clientHeight;
-
     const newWidth = Math.min(
       startWidth + e.clientX - startX,
       resizeRef.value.parentElement?.clientWidth || 0
     );
 
     const width = newWidth.toFixed(0) + "px";
-    const height = (newWidth / aspectRatio).toFixed(0) + "px";
+    const height = (newWidth / aspectRatio.value).toFixed(0) + "px";
     props.editor
       .chain()
       .updateAttributes(Image.name, { width, height })
-      .setNodeSelection(props.editor.state.selection.from)
+      .setNodeSelection(props.getPos())
       .focus()
       .run();
   }
@@ -128,6 +133,7 @@ onMounted(() => {
         :alt="alt"
         :href="href"
         class="w-full h-full"
+        @load="onImageLoaded"
       />
     </div>
   </node-view-wrapper>