2020-03-09 10:39:55 +00:00
|
|
|
const blob = new Blob(['importScripts("https://cdn.jsdelivr.net/npm/lzma@2.3.2/src/lzma_worker.min.js");']);
|
|
|
|
|
const lzma = new LZMA(window.URL.createObjectURL(blob));
|
|
|
|
|
|
2020-02-17 15:05:42 +00:00
|
|
|
let editor = null;
|
|
|
|
|
let select = null;
|
|
|
|
|
let clipboard = null;
|
2020-02-13 15:02:17 +00:00
|
|
|
|
2020-02-17 15:05:42 +00:00
|
|
|
const init = () => {
|
|
|
|
|
initCodeEditor();
|
2020-02-13 15:02:17 +00:00
|
|
|
initLangSelector();
|
|
|
|
|
initCode();
|
2020-02-17 15:05:42 +00:00
|
|
|
initClipboard();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const initCodeEditor = () => {
|
2020-03-09 13:38:28 +00:00
|
|
|
const readOnly = new URLSearchParams(window.location.search).has('readonly');
|
2020-03-09 14:54:31 +00:00
|
|
|
CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js';
|
2020-02-17 15:05:42 +00:00
|
|
|
editor = new CodeMirror(document.getElementById('editor'), {
|
|
|
|
|
lineNumbers: true,
|
2020-03-09 13:38:28 +00:00
|
|
|
theme: 'dracula',
|
2020-03-09 14:54:31 +00:00
|
|
|
readOnly: readOnly,
|
2020-04-22 16:50:44 +00:00
|
|
|
scrollbarStyle: 'simple',
|
2020-02-13 15:02:17 +00:00
|
|
|
});
|
2020-03-09 13:38:28 +00:00
|
|
|
if (readOnly) {
|
|
|
|
|
document.body.classList.add('readonly');
|
|
|
|
|
}
|
2020-02-17 15:05:42 +00:00
|
|
|
};
|
2020-02-13 15:02:17 +00:00
|
|
|
|
2020-02-17 15:05:42 +00:00
|
|
|
const initLangSelector = () => {
|
2020-02-13 15:02:17 +00:00
|
|
|
select = new SlimSelect({
|
|
|
|
|
select: '#language',
|
2020-04-22 16:50:44 +00:00
|
|
|
data: CodeMirror.modeInfo.map((e) => ({
|
2020-02-21 14:23:26 +00:00
|
|
|
text: e.name,
|
|
|
|
|
value: slugify(e.name),
|
2020-04-22 16:50:44 +00:00
|
|
|
data: { mime: e.mime, mode: e.mode },
|
2020-02-21 14:23:26 +00:00
|
|
|
})),
|
2020-04-22 16:50:44 +00:00
|
|
|
showContent: 'down',
|
|
|
|
|
onChange: (e) => {
|
2020-02-21 14:23:26 +00:00
|
|
|
const language = e.data || { mime: null, mode: null };
|
|
|
|
|
editor.setOption('mode', language.mime);
|
|
|
|
|
CodeMirror.autoLoadMode(editor, language.mode);
|
2020-04-22 16:50:44 +00:00
|
|
|
},
|
2020-02-13 15:02:17 +00:00
|
|
|
});
|
|
|
|
|
|
2020-03-09 13:38:28 +00:00
|
|
|
select.set(decodeURIComponent(new URLSearchParams(window.location.search).get('lang') || 'plain-text'));
|
2020-02-17 15:05:42 +00:00
|
|
|
};
|
2020-02-13 15:02:17 +00:00
|
|
|
|
2020-02-17 15:05:42 +00:00
|
|
|
const initCode = () => {
|
2020-02-13 15:02:17 +00:00
|
|
|
const base64 = location.hash.substr(1);
|
|
|
|
|
if (base64.length === 0) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-02-17 15:05:42 +00:00
|
|
|
decompress(base64, (code, err) => {
|
|
|
|
|
if (err) {
|
|
|
|
|
alert('Failed to decompress data: ' + err);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
editor.setValue(code);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const initClipboard = () => {
|
|
|
|
|
clipboard = new ClipboardJS('.clipboard');
|
|
|
|
|
clipboard.on('success', () => {
|
|
|
|
|
hideCopyBar(true);
|
|
|
|
|
});
|
|
|
|
|
};
|
2020-02-13 15:02:17 +00:00
|
|
|
|
2020-04-22 16:50:44 +00:00
|
|
|
const generateLink = (mode) => {
|
2020-02-17 15:05:42 +00:00
|
|
|
compress(editor.getValue(), (base64, err) => {
|
|
|
|
|
if (err) {
|
|
|
|
|
alert('Failed to compress data: ' + err);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-05 13:33:21 +00:00
|
|
|
const url = buildUrl(base64, mode);
|
2020-02-17 15:05:42 +00:00
|
|
|
showCopyBar(url);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Open the "Copy" bar and select the content
|
2020-04-22 16:50:44 +00:00
|
|
|
const showCopyBar = (dataToCopy) => {
|
2020-02-17 15:05:42 +00:00
|
|
|
const linkInput = document.getElementById('copy-link');
|
|
|
|
|
linkInput.value = dataToCopy;
|
|
|
|
|
linkInput.setSelectionRange(0, dataToCopy.length);
|
|
|
|
|
document.getElementById('copy').style.display = 'flex';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Close the "Copy" bar
|
2020-04-22 16:50:44 +00:00
|
|
|
const hideCopyBar = (success) => {
|
2020-02-17 15:05:42 +00:00
|
|
|
const copyButton = document.getElementById('copy-btn');
|
|
|
|
|
const copyBar = document.getElementById('copy');
|
|
|
|
|
if (!success) {
|
|
|
|
|
copyBar.style.display = 'none';
|
2020-02-13 15:02:17 +00:00
|
|
|
return;
|
|
|
|
|
}
|
2020-02-17 15:05:42 +00:00
|
|
|
copyButton.innerText = 'Copied !';
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
copyBar.style.display = 'none';
|
|
|
|
|
copyButton.innerText = 'Copy';
|
|
|
|
|
}, 800);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Build a shareable URL
|
2020-03-05 13:33:21 +00:00
|
|
|
const buildUrl = (rawData, mode) => {
|
2020-03-09 13:38:28 +00:00
|
|
|
const url =
|
|
|
|
|
`${location.protocol}//${location.host}${location.pathname}` +
|
|
|
|
|
`?lang=${encodeURIComponent(select.selected())}` +
|
|
|
|
|
(mode === 'iframe' ? '&readonly' : '') +
|
|
|
|
|
`#${rawData}`;
|
|
|
|
|
if (mode === 'markdown') {
|
2020-04-23 16:29:59 +00:00
|
|
|
return `[NoPaste snippet](${url})`;
|
2020-03-09 13:38:28 +00:00
|
|
|
}
|
|
|
|
|
if (mode === 'iframe') {
|
2020-03-09 14:54:31 +00:00
|
|
|
const height = document.getElementsByClassName('CodeMirror-sizer')[0].clientHeight + 8;
|
2020-03-09 13:38:28 +00:00
|
|
|
return `<iframe width="100%" height="${height}" frameborder="0" src="${url}"></iframe>`;
|
|
|
|
|
}
|
|
|
|
|
return url;
|
2020-02-17 15:05:42 +00:00
|
|
|
};
|
2020-02-13 15:02:17 +00:00
|
|
|
|
2020-02-17 15:05:42 +00:00
|
|
|
// Transform a compressed base64 string into a plain text string
|
|
|
|
|
const decompress = (base64, cb) => {
|
2020-02-17 15:41:54 +00:00
|
|
|
const progressBar = document.getElementById('progress');
|
|
|
|
|
|
2020-02-17 15:05:42 +00:00
|
|
|
const req = new XMLHttpRequest();
|
|
|
|
|
req.open('GET', 'data:application/octet;base64,' + base64);
|
|
|
|
|
req.responseType = 'arraybuffer';
|
2020-04-22 16:50:44 +00:00
|
|
|
req.onload = (e) => {
|
2020-02-17 15:41:54 +00:00
|
|
|
lzma.decompress(
|
|
|
|
|
new Uint8Array(e.target.response),
|
|
|
|
|
(result, err) => {
|
|
|
|
|
progressBar.style.width = '0';
|
|
|
|
|
cb(result, err);
|
|
|
|
|
},
|
2020-04-22 16:50:44 +00:00
|
|
|
(progress) => {
|
2020-02-17 15:41:54 +00:00
|
|
|
progressBar.style.width = 100 * progress + '%';
|
|
|
|
|
}
|
|
|
|
|
);
|
2020-02-17 15:05:42 +00:00
|
|
|
};
|
|
|
|
|
req.send();
|
|
|
|
|
};
|
2020-02-13 15:02:17 +00:00
|
|
|
|
2020-02-17 15:05:42 +00:00
|
|
|
// Transform a plain text string into a compressed base64 string
|
|
|
|
|
const compress = (str, cb) => {
|
2020-02-17 15:41:54 +00:00
|
|
|
const progressBar = document.getElementById('progress');
|
|
|
|
|
|
|
|
|
|
lzma.compress(
|
|
|
|
|
str,
|
|
|
|
|
1,
|
|
|
|
|
(compressed, err) => {
|
|
|
|
|
if (err) {
|
|
|
|
|
progressBar.style.width = '0';
|
|
|
|
|
cb(compressed, err);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = () => {
|
|
|
|
|
progressBar.style.width = '0';
|
|
|
|
|
cb(reader.result.substr(reader.result.indexOf(',') + 1));
|
|
|
|
|
};
|
|
|
|
|
reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
|
|
|
|
|
},
|
2020-04-22 16:50:44 +00:00
|
|
|
(progress) => {
|
2020-02-17 15:41:54 +00:00
|
|
|
progressBar.style.width = 100 * progress + '%';
|
2020-02-13 15:02:17 +00:00
|
|
|
}
|
2020-02-17 15:41:54 +00:00
|
|
|
);
|
2020-02-17 15:05:42 +00:00
|
|
|
};
|
2020-02-13 15:02:17 +00:00
|
|
|
|
2020-04-22 16:50:44 +00:00
|
|
|
const slugify = (str) =>
|
2020-02-21 14:23:26 +00:00
|
|
|
str
|
|
|
|
|
.toString()
|
|
|
|
|
.toLowerCase()
|
|
|
|
|
.replace(/\s+/g, '-')
|
|
|
|
|
.replace(/\+/g, '-p')
|
|
|
|
|
.replace(/#/g, '-sharp')
|
|
|
|
|
.replace(/[^\w\-]+/g, '');
|
|
|
|
|
|
2020-03-09 14:54:31 +00:00
|
|
|
/* Only for tests purposes */
|
|
|
|
|
const testAllModes = () => {
|
|
|
|
|
for (const [index, language] of Object.entries(CodeMirror.modeInfo)) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
console.info(language.name);
|
|
|
|
|
select.set(slugify(language.name));
|
|
|
|
|
}, 1000 * index);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2020-02-13 15:02:17 +00:00
|
|
|
init();
|