fitsum/scratchmarklet.js

## scratchmarklet.js
data:text/html, <html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>*scratch*</title><style> body{font-family:Hack,Menlo,Monaco,'Droid Sans Mono','Courier New',monospace;white-space:pre}body style{display:inline}style::before{content:'<style>'}style::after{content:'<\/style>'}*::before,*::after{color:rgba(136,18,128,0.5)}</style><script> const selectOuterMostNonBodyNode = (node) => node.parentNode.tagName === 'BODY' ? node : node.parentNode;function insertAfterSelection(selection,html){if(html === '') return;let nodeToInsert=document.createElement('div');nodeToInsert.innerHTML=html + '<br>';let range=selection.getRangeAt(0);let clone=range.cloneRange();let {endContainer} = range;range.setStartAfter(selectOuterMostNonBodyNode(endContainer)); range.insertNode(nodeToInsert);clone.setStart(clone.endContainer, clone.endOffset);selection.removeRange(range); selection.addRange(clone);} var globalEval=eval;function evaluate(){let selection=document.getSelection();let text=selection.toString();if(text.trim().length === 0){selection.modify("move", "backward", "lineboundary");selection.modify("extend", "forward", "lineboundary");text=selection.toString();}if(text.trim().length > 0){let result = '<b>__Error__</b>';try{result=globalEval(text);} catch(e){console.log(e);} insertAfterSelection(selection,result);}} let tutorial = `<div><br></div><div><br></div><div><br></div><div>"Press Ctrl+Enter to evaluate current line or selection"<br></div><div><br></div><div><br></div><div>3 * 33 + 7<br></div><div><br></div><div><br></div><div>"&lt;b&gt;Result is added as HTML! (execute this line)&lt;/b&gt;"<br></div><div><br></div><div><br></div><div>Math.random() > 0.3 ? "&lt;style&gt;body {background-color: rgb(253,246,227);}&lt;/style&gt" : "try again!";<br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div style="color: green;"><i style="color: red;">reset()</i><br></div><div style="color: green;"><i style="color: red;">clear()</i><br></div><div style="color: green;"><br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div style="color: rgb(88,88,88);">  window.open("https://gist.github.com/kahole/651990b888c19b84d5700422daa961de", "_blank")<br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div style="color: rgb(88,88,88);">[ "Emacs scratch buffer", window.open("https://www.gnu.org/software/emacs/manual/html_node/emacs/Lisp-Interaction.html", "_blank") ]<br></div><div><br></div><div style="color: rgb(88,88,88);">[ "Secretgeek's html quine", window.open("https://secretgeek.github.io/html_wysiwyg/html.html", "_blank") ]<br></div><div><br></div>`;if(navigator.userAgent.indexOf('Mac OS X') != -1){tutorial=tutorial.replace('Ctrl', 'Cmd');} const SCRATCH_STATE = 'scratch_state';function reset(){document.body.innerHTML=tutorial;return '';} function clear(){document.body.innerHTML = '<div><br></div>';return '';} document.addEventListener('keydown', (e) => (e.code === 'Tab' && document.execCommand('insertText', false, '  ') && e.preventDefault()));document.addEventListener('keypress', (e) => (e.ctrlKey && e.code === 'Enter' && evaluate() && e.preventDefault()));document.addEventListener('keydown', (e) => (e.metaKey && e.code === 'Enter' && evaluate() && e.preventDefault()));window.addEventListener('DOMContentLoaded', (e) => {reset();document.querySelector('[contenteditable]').addEventListener('paste', function (event) {event.preventDefault();document.execCommand('inserttext', false, event.clipboardData.getData('text/plain'));});});</script></head><body contenteditable="true" spellcheck="false"></body></html>