command plugin problem

[xsbchen]

I add a command to upload image by this:

1. my upload command plugin:

   function scribePluginUploadImageCommand(commands) {
       function openSystemFileSelectDialog(callback) {
         const input = document.createElement('input');
         input.type = 'file';
         input.accept = 'image/*';
         input.onchange = callback;
         input.click();
       }
   
       return function (scribe) {
         const uploadImageCommand = new scribe.api.Command('insertHTML');
   
         uploadImageCommand.execute = function execute() {
           const selection = new scribe.api.Selection();
           // open system file select dialog
           openSystemFileSelectDialog((e) => {
             // read image file as data url
             const reader = new FileReader();
             reader.onload = (event) => {
               // show image preview
               const dialogElement = document.createElement('div');
               const imageElement = document.createElement('img');
               const buttonElement = document.createElement('a');
               const inputElement = document.createElement('input');
   
               imageElement.src = event.target.result;
               imageElement.width = 200;
               imageElement.height = 200;
   
               inputElement.type = 'text';
               inputElement.placeholder = 'image title'
   
               buttonElement.href = 'javascript:void(0);';
               buttonElement.innerHTML = 'add';
               buttonElement.onclick = () => {
                 // focus to editor
                 // scribe.el.focus();
                 // restore selection
                 selection.selectMarkers();
                 // confirm to add to editor
                 scribe.api.SimpleCommand.prototype.execute.call(this, `<img title="${buttonElement.value}" src="http://idolosol.com/images/fd-1.jpg">`);
               };
               dialogElement.appendChild(imageElement);
               dialogElement.appendChild(inputElement);
               dialogElement.appendChild(buttonElement);
               dialogElement.style.cssText = 'position: absolute;top: 10%;left: 15%;width: 200px;height: 300px;';
   
               // save selection before show dialog
               selection.placeMarkers();
   
               document.body.appendChild(dialogElement);
             };
             reader.readAsDataURL(e.target.files[0]);
           });
         };
   
         scribe.commands.uploadImage = uploadImageCommand;
       };
     }

2. use my upload plugin
3. add a button to toolbar(use toolbarPlugin), data-command-name="uploadImage"

then i click focus to input, type "my title", and click "add", nothing can be insert to editor.

debug and found: when i call placeMarkers, after will trigger observeDomChanges, selection remove by:

      /**
       * Apply the formatters when there is a DOM mutation.
       */
      var applyFormatters = function() {
        if (!scribe._skipFormatters) {
          var selection = new scribe.api.Selection();
          var isEditorActive = selection.range;

          var runFormatters = function () {
            if (isEditorActive) {
              selection.placeMarkers();
            }
            scribe.setHTML(scribe._htmlFormatterFactory.format(scribe.getHTML()));
            selection.selectMarkers();
          }.bind(scribe);

          // We only want to wrap the formatting in a transaction if the editor is
          // active. If the DOM is mutated when the editor isn't active (e.g.
          // `scribe.setContent`), we do not want to push to the history. (This
          // happens on the first `focus` event).

          // The previous check is no longer needed, and the above comments are no longer valid.
          // Now `scribe.setContent` updates the content manually, and `scribe.pushHistory`
          // will not detect any changes, and nothing will be push into the history.
          // Any mutations made without `scribe.getContent` will be pushed into the history normally.

          // Pass content through formatters, place caret back
          scribe.transactionManager.run(runFormatters);
        }

        delete scribe._skipFormatters;
      }.bind(scribe);

      observeDomChanges(scribe.el, applyFormatters);

how can i fix?