Skip to content

Is there a way to drag a png file to the editor and format the file in markdown?  #9

@tparsons9

Description

@tparsons9

For example, I have a dashboard box to the right of my markdown editor with saved plots as pngs. I want to reference the file on drag over and set ![](file) in the markdown editor. The files are base64.
I tried writing the following JS code but no luck as of yet.

tags$head(tags$link(rel = "icon", type = "image/png", href = "logo.png"),
                         tags$title(""), 
              tags$script("
                      /* Add event listener for drag and drop images */
                        $('#' + 'myEditor' + '_editor').on('drop', function(e) {
                          e.preventDefault();
                          e.stopPropagation();
                          const files = e.originalEvent.dataTransfer.files;
                          if (files.length === 0) {
                            return;
                          }
                          const file = files[0];
                          if (file.type.match(/^image/)) {
                            const reader = new FileReader();
                            reader.onload = function(evt) {
                              const dataURL = evt.target.result;
                              myEditor_editor.insertImage(dataURL);
                            };
                            reader.readAsDataURL(file);
                          }
                        });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions