feat: handle deleteContentBackward

worktile · Mar 19, 2023 · b80970a · b80970a
1 parent 55821dd
commit b80970a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/src/components/editable/editable.component.ts b/packages/src/components/editable/editable.component.ts
@@ -564,9 +564,9 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy, Aft
                     if (nativeTargetRange) {
                         const targetRange = AngularEditor.toSlateRange(editor, nativeTargetRange);
                         if (data) {
-                            setTimeout(() => {
+                            restoreDom(editor, () => {
                                 Transforms.insertText(editor, data.toString(), { at: targetRange });
-                            }, 0);
+                            });
                         } else {
                             restoreDom(editor, () => {
                                 Transforms.delete(editor, { at: targetRange });

diff --git a/packages/src/utils/restore-dom.ts b/packages/src/utils/restore-dom.ts
@@ -3,7 +3,7 @@ import { EDITOR_TO_ELEMENT } from './weak-maps';
 
 export function restoreDom(editor: Editor, execute: () => void) {
     const editable = EDITOR_TO_ELEMENT.get(editor);
-    const observer = new MutationObserver(mutations => {
+    let observer = new MutationObserver(mutations => {
         mutations.reverse().forEach(mutation => {
             if (mutation.type === 'characterData') {
                 // We don't want to restore the DOM for characterData mutations
@@ -21,13 +21,20 @@ export function restoreDom(editor: Editor, execute: () => void) {
                 console.log('added: ', node);
             });
         });
-        observer.disconnect();
-        console.log('restore dom executed');
+        disconnect();
         execute();
+        console.log('restore dom executed');
     });
     observer.observe(editable, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
-    setTimeout(() => {
+    const disconnect = () => {
         observer.disconnect();
+        observer = null;
+    }
+    setTimeout(() => {
+        if (observer) {
+            disconnect();
+            execute();
+        }
     }, 0);
 }