From 856d61537d2b5a6be58da02ff6f8ac0c6f4e8931 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Fri, 30 Aug 2024 17:25:28 +0800
Subject: [PATCH] fix: resolve error when deleting images in default editor
 (#6551)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area editor
/area ui
/milestone 2.19.x

#### What this PR does / why we need it:

在上传的文件中执行 `resetUpload` 方法之前，提前验证是否可以进行更新。

#### How to test it?

测试删除图片或变更图片位置时，默认编辑器是否会进行报错。

#### Does this PR introduce a user-facing change?
```release-note
解决默认编辑器删除图片后报错的问题
```
---
 .../editor/src/components/bubble/BubbleItem.vue        |  7 ++-----
 ui/packages/editor/src/extensions/paragraph/index.ts   |  2 --
 ui/packages/editor/src/utils/isNodeEmpty.ts            |  4 ++++
 .../components/editor/extensions/audio/AudioView.vue   |  9 +++++++--
 .../components/editor/extensions/image/ImageView.vue   | 10 ++++++++--
 .../components/editor/extensions/video/VideoView.vue   | 10 ++++++++--
 6 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/ui/packages/editor/src/components/bubble/BubbleItem.vue b/ui/packages/editor/src/components/bubble/BubbleItem.vue
index 787d31bb5..a4f3fb6f7 100644
--- a/ui/packages/editor/src/components/bubble/BubbleItem.vue
+++ b/ui/packages/editor/src/components/bubble/BubbleItem.vue
@@ -30,11 +30,7 @@ const handleBubbleItemClick = (editor: Editor) => {
   }
   const callback = props.action?.({ editor });
   if (typeof callback === "object") {
-    if (componentRef.value) {
-      componentRef.value = undefined;
-    } else {
-      componentRef.value = callback;
-    }
+    componentRef.value = callback;
   }
 };
 </script>
@@ -46,6 +42,7 @@ const handleBubbleItemClick = (editor: Editor) => {
     :auto-hide="true"
     :shown="!!componentRef"
     :distance="10"
+    @hide="componentRef = undefined"
   >
     <button
       v-if="visible({ editor })"
diff --git a/ui/packages/editor/src/extensions/paragraph/index.ts b/ui/packages/editor/src/extensions/paragraph/index.ts
index d304c2bc3..fa59703e0 100644
--- a/ui/packages/editor/src/extensions/paragraph/index.ts
+++ b/ui/packages/editor/src/extensions/paragraph/index.ts
@@ -102,7 +102,6 @@ const Paragraph = TiptapParagraph.extend<ExtensionOptions & ParagraphOptions>({
       Backspace: ({ editor }: { editor: CoreEditor }) => {
         const { state, view } = editor;
         const { selection } = state;
-
         if (isListActive(editor) || !isActive(state, Paragraph.name)) {
           return false;
         }
@@ -118,7 +117,6 @@ const Paragraph = TiptapParagraph.extend<ExtensionOptions & ParagraphOptions>({
         }
 
         const beforePos = $from.before($from.depth);
-
         if (isEmpty($from.parent)) {
           return deleteCurrentNodeAndSetSelection(
             $from,
diff --git a/ui/packages/editor/src/utils/isNodeEmpty.ts b/ui/packages/editor/src/utils/isNodeEmpty.ts
index 81c22d8c3..5124ddfab 100644
--- a/ui/packages/editor/src/utils/isNodeEmpty.ts
+++ b/ui/packages/editor/src/utils/isNodeEmpty.ts
@@ -15,5 +15,9 @@ export const isParagraphEmpty = (node: PMNode) => {
     return false;
   }
 
+  if (node.childCount > 0) {
+    return false;
+  }
+
   return node.textContent.length === 0;
 };
diff --git a/ui/src/components/editor/extensions/audio/AudioView.vue b/ui/src/components/editor/extensions/audio/AudioView.vue
index fb5d8ac61..a35531ed5 100644
--- a/ui/src/components/editor/extensions/audio/AudioView.vue
+++ b/ui/src/components/editor/extensions/audio/AudioView.vue
@@ -39,8 +39,13 @@ const handleSetExternalLink = (attachment: AttachmentAttr) => {
 };
 
 const resetUpload = () => {
-  if (props.getPos()) {
-    props.updateAttributes({
+  const canUpdateAttributes = props.editor.can().updateAttributes(Audio.name, {
+    width: undefined,
+    height: undefined,
+    file: undefined,
+  });
+  if (canUpdateAttributes && props.getPos()) {
+    props.editor.commands.updateAttributes(Audio.name, {
       width: undefined,
       height: undefined,
       file: undefined,
diff --git a/ui/src/components/editor/extensions/image/ImageView.vue b/ui/src/components/editor/extensions/image/ImageView.vue
index 6f548425c..d69069d75 100644
--- a/ui/src/components/editor/extensions/image/ImageView.vue
+++ b/ui/src/components/editor/extensions/image/ImageView.vue
@@ -93,8 +93,14 @@ const handleUploadError = () => {
 const resetUpload = () => {
   fileBase64.value = undefined;
   uploadProgress.value = undefined;
-  if (props.getPos()) {
-    props.updateAttributes({
+
+  const canUpdateAttributes = props.editor.can().updateAttributes(Image.name, {
+    width: undefined,
+    height: undefined,
+    file: undefined,
+  });
+  if (canUpdateAttributes && props.getPos()) {
+    props.editor.commands.updateAttributes(Image.name, {
       width: undefined,
       height: undefined,
       file: undefined,
diff --git a/ui/src/components/editor/extensions/video/VideoView.vue b/ui/src/components/editor/extensions/video/VideoView.vue
index 3a103cdbe..6480650ae 100644
--- a/ui/src/components/editor/extensions/video/VideoView.vue
+++ b/ui/src/components/editor/extensions/video/VideoView.vue
@@ -11,6 +11,7 @@ import RiVideoAddLine from "~icons/ri/video-add-line";
 import { EditorLinkObtain } from "../../components";
 import InlineBlockBox from "../../components/InlineBlockBox.vue";
 import type { AttachmentAttr } from "../../utils/attachment";
+import Video from "./index";
 
 const props = defineProps<{
   editor: Editor;
@@ -57,8 +58,13 @@ const handleSetExternalLink = (attachment: AttachmentAttr) => {
 };
 
 const resetUpload = () => {
-  if (props.getPos()) {
-    props.updateAttributes({
+  const canUpdateAttributes = props.editor.can().updateAttributes(Video.name, {
+    width: undefined,
+    height: undefined,
+    file: undefined,
+  });
+  if (canUpdateAttributes && props.getPos()) {
+    props.editor.commands.updateAttributes(Video.name, {
       width: undefined,
       height: undefined,
       file: undefined,