use insertContent in some extensions

packages/extension-horizontal-rule/src/horizontal-rule.ts

@@ -42,10 +42,11 @@ export const HorizontalRule = Node.create<HorizontalRuleOptions>({
 
   addCommands() {
     return {
-      setHorizontalRule: () => ({ tr, dispatch }) => {
+      setHorizontalRule: () => ({ chain }) => {
+        return chain()
+          .insertContent({ type: this.name })
+          .command(({ tr, dispatch }) => {
             if (dispatch) {
-          tr.replaceSelectionWith(this.type.create())
-
               const { parent, pos } = tr.selection.$from
               const posAfter = pos + 1
               const nodeAfter = tr.doc.nodeAt(posAfter)
@@ -64,6 +65,8 @@ export const HorizontalRule = Node.create<HorizontalRuleOptions>({
             }
 
             return true
+          })
+          .run()
       },
     }
   },

packages/extension-image/src/image.ts

@@ -69,15 +69,11 @@ export const Image = Node.create<ImageOptions>({
 
   addCommands() {
     return {
-      setImage: options => ({ tr, dispatch }) => {
+      setImage: options => ({ commands }) => {
-        const { selection } = tr
+        return commands.insertContent({
-        const node = this.type.create(options)
+          type: this.name,
-
+          attrs: options,
-        if (dispatch) {
+        })
-          tr.replaceRangeWith(selection.from, selection.to, node)
-        }
-
-        return true
       },
     }
   },