The Magical Uses of Clipboard I Learned from Typoro (2).md

The last article introduced the magical use of Clipboard that I learned from Typora: When we copy text from a web page, two formats of data will be inserted into the clipboard: plain text and rich text. When we paste into other editors, the text editor will use plain text data, and the rich text editor will use rich text data (the corresponding text will be extracted into MarkDown format in Typora).

The specific content and simple code implementation can be viewed: of Clipboard I learned from Typora.md 1619f428ecd2d6

Picture processing method in Typora

People who use Typora frequently should know that Typora also has an excellent experience in processing pictures. When inserting a picture, you can specify the picture storage method:

When we insert a picture, the upload service will automatically upload the picture in the clipboard or the dragged picture and replace it with the network address. This way, when you send a document to others or publish a document to a blog, you will not be unable to view the document because it is locally.

I also wrote a small tool : 1619f428ecd40a file-uploader-cli , which can process files and upload them to the corresponding storage service, such as github , ftp , object storage, etc. You can visit the github address to view the specific configuration method (uPic and Picgo also Support Typora).

For a custom upload service, when an image is inserted, Typora will call the upload service and pass in the file path, and the upload service can print the upload result on the console.

Read the picture data in the clipboard

We still perform a quick test in the console, open any webpage, find any tag in the element panel and add the contenteditable attribute, the current tag becomes an editable element.

<p contenteditable>
  xxxx
</p>

Execute code in the console:

document.addEventListener('paste', function(e){
    console.log(e)
    const items = e.clipboardData.items;
    console.log(items)
    const fileList = e.clipboardData.files
    console.log(fileList)
    for(let i=0;i< items.length;i++){
        console.log(items[i])
        let f = items[i].getAsFile()
        console.log(f)
    }
    e.preventDefault();
})

local files

Copy the local file (can be a picture or other format file), and perform the paste operation in the label:

As can be seen from the above figure, there are two ways to retrieve image data from clipboardData:

• e.clipboardData.items, is a DataTransferItemList type data, each element is a DataTransferItem type, you can get the File object through DataTransferItem.getAsFile()
• e.clipboardData.files is a FileList, each element is a File

DataTransferItem.getAsFile can get the data only when the local file is pasted, otherwise it is null.

Web picture

When the copied data is a network picture, there are two situations:

• Only include web images
• Contains network pictures and text

When copying a network picture (right-click to copy the picture from a webpage), the clipboard will get two kinds of data: text/html and image/png . For details, please refer to: The magical use of Clipboard I learned from Typora.md

When including network pictures and text, the clipboard will get: text/plain and text/html .

So for the two ways of including network pictures, the data obtained in the paste event is also different:

Get picture files

From the above information, we can understand: Only when the pasted is a local image or network image, we can get the image object through DataTransferItem.getAsFile; when it contains text, we can get the plain text and rich text data through DataTransferItem.getAsString.

How Typora handles image data

Paste the picture into Typora

If it is a local file, Typora will save it according to the picture settings in the preferences:

• When "Upload Service" is selected, the local image address will be passed to the custom image upload service. If the upload is successful, it will be replaced with the network address; if the upload fails, the local image will be kept referenced.
• If another configuration is selected, the picture will be copied to the corresponding configuration folder.

If it is a non-local picture in the clipboard (such as a screenshot copy), it will be saved as a local file before uploading or copying.

If it is rich text data, it will be rendered directly ( not checked to apply the above rules to pictures in the network location).

Drag and drop the picture to Typora

Typora supports automatic upload of paste images, and also supports drag-and-drop image upload, we can get the File object through Drop Event

document.addEventListener('drop', function(e){
    console.log(e)
    const items = e.dataTransfer.items;
    console.log(items)
    const fileList = e.dataTransfer.files
    console.log(fileList)
    e.preventDefault();
})

The drag data is stored in DragEvent.dataTransfer: