Skip to content

Instantly share code, notes, and snippets.

@mkhuzaima
Last active March 22, 2023 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mkhuzaima/bf0f5c4357aec8cbc4f6c10c3349e589 to your computer and use it in GitHub Desktop.
Save mkhuzaima/bf0f5c4357aec8cbc4f6c10c3349e589 to your computer and use it in GitHub Desktop.
Paste image from clipboard without need of uplaoding file using ctrl + v. The code has been copied from https://greasyfork.org/en/scripts/461190-overleaf-paste-images-from-clipboard . I created this gist because the file was not accessible in some regions.
// ==UserScript==
// @name Overleaf - Paste Images from Clipboard
// @namespace https://github.com/BLumbye/overleaf-userscripts
// @version 0.6
// @description Paste images from your clipboard directly into Overleaf (Community Edition, Cloud and Pro)
// @author Sebastian Haas, Benjamin Lumbye
// @license GPL-3
// @match https://www.overleaf.com/project/*
// @require https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js
// @grant none
// ==/UserScript==
// Based on https://github.com/cmprmsd/Overleaf-Image-Helper
'use strict';
const assetsFolder = 'assets';
// Parse images from the clipboard
function retrieveImageFromClipboardAsBlob(pasteEvent, callback) {
if (pasteEvent.clipboardData === false) return;
const items = pasteEvent.clipboardData.items;
if (items === undefined) return;
for (let i = 0; i < items.length; i++) {
// Skip content if not image
if (items[i].type.indexOf('image') == -1) continue;
// Retrieve image on clipboard as blob
const blob = items[i].getAsFile();
callback(blob);
}
}
// Upload the image blob
async function uploadImage(imageBlob, hash) {
try {
const formData = new FormData();
formData.append('qqfile', imageBlob, hash + '.png');
const result = await fetch(
`${document.location.pathname}/upload?` +
new URLSearchParams({
folder_id: _ide.fileTreeManager.findEntityByPath(assetsFolder).id,
_csrf: csrfToken,
}),
{
method: 'POST',
body: formData,
},
);
const json = await result.json();
console.log('Pasted image asset uploaded, entity id:', json.entity_id);
} catch (e) {
console.log(e);
}
}
async function checkAndCreateAssetsFolder() {
if (_ide.fileTreeManager.findEntityByPath(assetsFolder)) return;
console.log('Creating missing assets folder...');
try {
await _ide.fileTreeManager.createFolder(assetsFolder, '/');
} catch (e) {
console.log(e);
}
}
document.querySelector('#editor').addEventListener('paste', (e) => {
retrieveImageFromClipboardAsBlob(e, async (blob) => {
await checkAndCreateAssetsFolder();
const reader = new FileReader();
reader.readAsBinaryString(blob);
reader.onloadend = () => {
const hash = CryptoJS.SHA256(reader.result).toString().substring(0, 8);
console.log('Uploading image...');
uploadImage(blob, hash);
const view = _ide.$scope.editor.sharejs_doc.cm6.view;
const state = view.state;
const changeSet = state.replaceSelection(`\\begin{figure}[h!]
\\centering
\\includegraphics[width=0.66\\textwidth]{assets/${hash}.png}
\\caption{Caption...}
\\label{fig:${hash}}
\\end{figure}`);
changeSet.selection.ranges.map((range) => {
range.from -= 14 + hash.length;
range.to -= 14;
});
view.dispatch(changeSet);
};
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment