fix: resolve error when deleting images in default editor

halo-dev · Aug 29, 2024 · c4d786d · c4d786d
1 parent 9c9ac1b
commit c4d786d
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 16 deletions.
diff --git 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 })"
@@ -67,9 +64,7 @@ const handleBubbleItemClick = (editor: Editor) => {
       <div
         class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
       >
-        <KeepAlive>
-          <component :is="componentRef" v-bind="props"></component>
-        </KeepAlive>
+        <component :is="componentRef" v-bind="props"></component>
       </div>
     </template>
   </VDropdown>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,