fix: focus editor after inserting link or image

sibiraj-s · Jan 8, 2021 · 2d10e5f · 2d10e5f
1 parent ad2b19c
commit 2d10e5f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/src/lib/commands/Image.ts b/src/lib/commands/Image.ts
@@ -17,7 +17,9 @@ class Image {
       nodeAttrs.width = selection.node.attrs.width;
     }
 
-    tr.replaceSelectionWith(type.createAndFill(nodeAttrs));
+    tr
+      .replaceSelectionWith(type.createAndFill(nodeAttrs))
+      .scrollIntoView();
 
     if (tr.docChanged) {
       dispatch?.(tr);

diff --git a/src/lib/commands/Link.ts b/src/lib/commands/Link.ts
@@ -32,8 +32,16 @@ class Link {
 
 
     const node = schema.text(text, [schema.marks.link.create(attrs)]);
-    dispatch(tr.replaceSelectionWith(node, false));
-    return true;
+
+    tr.replaceSelectionWith(node, false)
+      .scrollIntoView();
+
+    if (tr.docChanged) {
+      dispatch?.(tr);
+      return true;
+    }
+
+    return false;
   }
 
   isActive(state: EditorState, options = defaultOptions): boolean {

diff --git a/src/lib/modules/menu/image/image.component.ts b/src/lib/modules/menu/image/image.component.ts
@@ -119,6 +119,7 @@ export class ImageComponent implements OnDestroy {
     };
 
     ImageCommand.execute(attrs, state, dispatch);
+    this.editorView.focus();
     this.hideForm();
   }
 

diff --git a/src/lib/modules/menu/link/link.component.ts b/src/lib/modules/menu/link/link.component.ts
@@ -135,6 +135,7 @@ export class LinkComponent implements OnDestroy {
 
     if (selection.empty) {
       LinkCommand.insert(text, attrs, state, dispatch);
+      this.editorView.focus();
     } else {
       LinkCommand.update(attrs, state, dispatch);
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,6 +119,7 @@ export class ImageComponent implements OnDestroy { @@
         };
         ImageCommand.execute(attrs, state, dispatch);
+        this.editorView.focus();
         this.hideForm();
       }
@@ Expand Down @@