removed shit
added beautiful editor yolo
This commit is contained in:
Yaroslav
@@ -0,0 +1,358 @@
|
||||
<!--
|
||||
#
|
||||
# Writing is an in-browser text editor, supporting LaTeX (MathJax) and Markdown, designed to be lightweight and, unlike some other similar solutions,
|
||||
# fast to display (no delay when writing, no flickering when writing math), as close as possible to the math.stackexchange.com editor.
|
||||
#
|
||||
# author: Joseph Ernest (twitter: @JosephErnest)
|
||||
# url: https://github.com/josephernest/writing
|
||||
# license: MIT license
|
||||
# based on: Pagedown (https://code.google.com/archive/p/pagedown/, https://github.com/balpha/pagedown)
|
||||
# Pagedown Extra (https://github.com/jmcmanus/pagedown-extra)
|
||||
# MathJax (https://www.mathjax.org/)
|
||||
# StackOverflow's editor (https://gist.github.com/gdalgas/a652bce3a173ddc59f66)
|
||||
#
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html class="fixedheight texroman">
|
||||
<head>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>Editor</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style type="text/css">
|
||||
@font-face { font-family: texroman; src: url(cmunrm.otf); font-weight: 400; font-style: normal; font-stretch: normal; }
|
||||
@font-face { font-family: texroman; src: url(cmunrb.otf); font-weight: 700; font-style: normal; font-stretch: normal; }
|
||||
|
||||
html { font-family: sans-serif; }
|
||||
* { margin: 0; padding: 0; border: 0; outline: 0; }
|
||||
.texroman { font-family: texroman !important; }
|
||||
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
|
||||
.fixedheight { height: 100%; }
|
||||
.column { padding: 20px; }
|
||||
#wmd-button-bar { display: none; }
|
||||
#wmd-input { float: left; box-sizing: border-box; width: 50%; resize: horizontal; font-size: 14px; border-right: 1px solid #ddd; height: 100%; overflow: y-scroll; }
|
||||
#wmd-preview { overflow-y: auto; overflow-x: hidden; font-size: 15px; height: 100%; box-sizing: border-box; min-height: 100vh; }
|
||||
#wmd-preview li { margin-left: 20px; }
|
||||
#wmd-preview code, #wmd-input { font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif; }
|
||||
#wmd-preview p code, #wmd-preview li code { background-color: #f5f5f5; white-space: pre-wrap; padding: 3px 5px; font-size: 13px; }
|
||||
#wmd-preview pre { background-color: #f5f5f5; padding: 5px; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; font-size: 13px; }
|
||||
#wmd-preview blockquote { background-color: #defcff; padding: 10px; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; border-left: 2px solid #0ae2f5; }
|
||||
#wmd-preview blockquote p { margin-bottom: 0; }
|
||||
#wmd-preview hr { background-color: #ddd; color: #ddd; height: 1px; margin-bottom: 15px; margin-top: 15px; }
|
||||
#wmd-preview h1 { margin-bottom: 0.5em; font-size: 1.4em; }
|
||||
#wmd-preview h2 { margin-bottom: 0.5em; font-size: 1.2em; }
|
||||
#wmd-preview h3 { margin-bottom: 0.5em; font-size: 1em; }
|
||||
#wmd-preview p { margin-bottom: 1em; line-height: 1.25; }
|
||||
#wmd-preview ul { margin-bottom: 1.5em; line-height: 1.25; }
|
||||
#wmd-preview img { max-width: 100%; max-height: 100%; }
|
||||
#wmd-preview table { display: block; width: 100%; overflow: auto; border-collapse: collapse; margin-bottom: 0.5em; }
|
||||
#wmd-preview table th { font-weight: bold; }
|
||||
#wmd-preview table th, #wmd-preview table td { padding: 6px 13px; border: 1px solid #ddd; }
|
||||
#wmd-preview table tr { background-color: #fff; border-top: 1px solid #ccc; }
|
||||
#wmd-preview table tr:nth-child(2n) { background-color: #f8f8f8; }
|
||||
#wmd-preview a { text-decoration: none; color: #07c; }
|
||||
#wmd-preview .pagebreak { border-bottom: 1px dashed #eee; padding-top: 20px; margin-bottom: 30px; }
|
||||
#helpicon { position: absolute; bottom: 0; left: 0; margin: 5px; color: #ccc; cursor: pointer; font-family: sans-serif; font-size: 15px; }
|
||||
#help { display: none; position: fixed; top: 10%; height: 70%; left: 25%; max-width: 50%; overflow: hidden; background-color: white; border: 1px solid #ccc; padding: 15px 30px 20px 30px; overflow-y: auto; }
|
||||
#help pre { word-wrap: break-word !important; white-space: pre-wrap !important; }
|
||||
#closeicon { position: fixed; top: 10%; left: 25%; margin: 5px 8px; color: #ccc; cursor: pointer; font-family: sans-serif; }
|
||||
#openFileInput { position: absolute; display: none; }
|
||||
|
||||
@media print {
|
||||
#helpicon { display: none; }
|
||||
#wmd-preview .pagebreak { opacity: 0; }
|
||||
}
|
||||
|
||||
.dark-mode #wmd-input, .dark-mode #wmd-preview { background-color: #212121; color: #FAFAFA; border-color: #757575;}
|
||||
.dark-mode #wmd-preview a, .dark-mode #help a, .dark-mode .wmd-prompt-dialog a { color: #90CAF9; }
|
||||
.dark-mode #wmd-preview p code, .dark-mode #wmd-preview li code, .dark-mode #wmd-preview pre { background-color: #424242; }
|
||||
.dark-mode #wmd-preview table th, .dark-mode #wmd-preview table td { border-color: #757575; }
|
||||
.dark-mode #wmd-preview table tr { background-color: #424242; border-color: #757575; }
|
||||
.dark-mode #help { background-color: #424242; border-color: #757575; color: #FAFAFA; }
|
||||
.dark-mode .wmd-prompt-dialog { background-color: #424242; color: #FAFAFA; }
|
||||
.dark-mode .wmd-prompt-dialog input { background-color: #212121; color: #FAFAFA; }
|
||||
.dark-mode #wmd-preview blockquote { background-color: #00796B; border-color: #004D40; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body class="fixedheight">
|
||||
<script type="text/javascript" src="Markdown.Converter.js"></script>
|
||||
<script type="text/javascript" src="Markdown.Sanitizer.js"></script>
|
||||
<script type="text/javascript" src="Markdown.Editor.js"></script>
|
||||
<script type="text/javascript" src="Markdown.Extra.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML-full"></script>
|
||||
<script type="text/javascript" src="mathjax-editing_writing.js"></script>
|
||||
<!-- <script type="text/javascript" src="jspdf.min.js"></script> -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
<input id="openFileInput" type="file" />
|
||||
<div id="wmd-button-bar" class="wmd-button-bar"></div>
|
||||
<textarea id="wmd-input" class="column wmd-input" spellcheck="false"></textarea>
|
||||
<div id="wmd-preview" class="column wmd-preview">
|
||||
<noscript>This text editor requires JavaScript.</noscript>
|
||||
</div>
|
||||
<div id="helpicon" class="unselectable">?</div>
|
||||
<div id="help">
|
||||
<div id="closeicon" class="unselectable">X</div>
|
||||
<pre>
|
||||
<a href="https://github.com/josephernest/writing">Writing</a> is a lightweight distraction-free text editor.
|
||||
Write text on the left, and the result is displayed on the right.
|
||||
|
||||
Commands
|
||||
--------
|
||||
CTRL + D: toggle display mode (editor only, preview only or both-at-the-same-time)
|
||||
CTRL + P: print or export as PDF
|
||||
CTRL + S: save source code as .MD file
|
||||
CTRL + SHIFT + O: open .MD file
|
||||
CTRL + SHIFT + 7: send to the storage
|
||||
|
||||
CTRL + SHIFT + L: enable / disable LaTeX (i.e. math formulas)
|
||||
CTRL + SHIFT + D: toggle dark mode
|
||||
CTRL + SHIFT + R: toggle roman (LaTex-like) or sans-serif font
|
||||
CTRL + SHIFT + H: show this help dialog
|
||||
|
||||
F11: full-screen (in most browsers)
|
||||
|
||||
Markdown syntax
|
||||
---------------
|
||||
#Title
|
||||
##Subtitle
|
||||
This is *italic* and this is **bold**.
|
||||
This is a [link](http://www.example.com/) and this is an .
|
||||
Write code with `...` or by adding a 4-whitespace indent to the paragraph.
|
||||
> This is a quote.
|
||||
|
||||
LaTeX syntax
|
||||
------------
|
||||
This formula $x^2+1$ will be displayed inline.
|
||||
This formula $$x^2+1$$ will be displayed in a new paragraph.
|
||||
|
||||
Specific syntax
|
||||
---------------
|
||||
\pagebreak will trigger a pagebreak when printing / exporting to PDF.
|
||||
|
||||
About
|
||||
-----
|
||||
Made by <a href="https://twitter.com/JosephErnest">@JosephErnest</a>
|
||||
<a href="https://github.com/josephernest/writing">https://github.com/josephernest/writing</a>
|
||||
Uses <a href="https://code.google.com/archive/p/pagedown/">Pagedown</a>, <a href="https://github.com/jmcmanus/pagedown-extra">Pagedown Extra</a>, <a href="https://www.mathjax.org/">MathJax</a>, StackOverflow's <a href="https://gist.github.com/gdalgas/a652bce3a173ddc59f66">editor</a> code and the <a href="http://cm-unicode.sourceforge.net/">Computer Modern</a> font.
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
togglemathjax = function(enabled) {
|
||||
if (enabled) {
|
||||
if (!latexenabledonce)
|
||||
{
|
||||
MathJax.Hub.Config(
|
||||
{"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic: true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
|
||||
tex2jax: { inlineMath: [ ["$", "$"], ["\\\\(","\\\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
|
||||
TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
|
||||
messageStyle: "none", skipStartupTypeset: true });
|
||||
mjpd1.mathjaxEditing.prepareWmdForMathJax(editor, '', [["$", "$"]]);
|
||||
latexenabledonce = true;
|
||||
if (editor.refreshPreview !== undefined)
|
||||
editor.refreshPreview();
|
||||
}
|
||||
else {
|
||||
MathJax.Hub.queue.pending = 0;
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "wmd-preview"]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
MathJax.Hub.queue.pending = 1;
|
||||
if (editor.refreshPreview !== undefined)
|
||||
editor.refreshPreview();
|
||||
else {
|
||||
MathJax.Hub.Config({ skipStartupTypeset: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toggledarkmode = function(enabled){
|
||||
$('body').toggleClass('dark-mode',enabled);
|
||||
}
|
||||
|
||||
if (localStorage.getItem("writing") !== null) {
|
||||
$('#wmd-input').val(localStorage.getItem("writing"));
|
||||
}
|
||||
|
||||
openFile = function(e) {
|
||||
readFile(e.target.files[0]);
|
||||
}
|
||||
|
||||
readFile = function(file){ // https://stackoverflow.com/a/26298948/1422096
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
var contents = e.target.result;
|
||||
$('#wmd-input').val(contents); // display file content
|
||||
editor.refreshPreview();
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
document.getElementById('openFileInput').addEventListener('change', openFile, false);
|
||||
|
||||
$('body').on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
})
|
||||
.on('drop', function(e) {
|
||||
readFile(e.originalEvent.dataTransfer.files[0]);
|
||||
});
|
||||
|
||||
$('#wmd-input').on('input', function() {
|
||||
localStorage.setItem("writing", $('#wmd-input').val());
|
||||
});
|
||||
|
||||
$('#wmd-input').focus();
|
||||
|
||||
$('#helpicon').click(function() {
|
||||
$('#help').show();
|
||||
});
|
||||
|
||||
$('#closeicon, #wmd-input, #wmd-preview').click(function() {
|
||||
$('#help').hide();
|
||||
});
|
||||
|
||||
$(document).on('keydown', function(e) {
|
||||
if (e.keyCode == 80 && (e.ctrlKey || e.metaKey)) { // CTRL + P
|
||||
if (mode != 1) {
|
||||
mode = 1;
|
||||
$('#wmd-input').hide();
|
||||
$('#wmd-preview').show();
|
||||
$('body').removeClass('fixedheight');
|
||||
$('html').removeClass('fixedheight');
|
||||
toggledarkmode(false);
|
||||
e.preventDefault();
|
||||
window.print();
|
||||
toggledarkmode(darkmodeenabled);
|
||||
return false;
|
||||
}
|
||||
//var doc = new jsPDF();
|
||||
//var specialElementHandlers = {'#editor': function (element, renderer) { return true; } };
|
||||
//doc.fromHTML($('#wmd-preview').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers });
|
||||
//doc.save('file.pdf');
|
||||
/*var restorepage = $('body').html();
|
||||
var printcontent = $('#wmd-preview').clone();
|
||||
$('body').empty().html(printcontent);
|
||||
window.print();
|
||||
$('body').html(restorepage);
|
||||
e.preventDefault();
|
||||
return false;*/
|
||||
}
|
||||
else if (e.keyCode == 83 && (e.ctrlKey || e.metaKey)) { // CTRL + S
|
||||
var blob = new Blob([$('#wmd-input').val()], {type: 'text'}); // https://stackoverflow.com/a/33542499/1422096
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
window.navigator.msSaveBlob(blob, 'newfile.md');
|
||||
}
|
||||
else {
|
||||
var elem = window.document.createElement('a');
|
||||
elem.href = window.URL.createObjectURL(blob);
|
||||
elem.download = 'newfile.md';
|
||||
document.body.appendChild(elem);
|
||||
elem.click();
|
||||
document.body.removeChild(elem);
|
||||
}
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
else if (e.keyCode == 68 && (e.ctrlKey || e.metaKey) && !e.shiftKey) { // CTRL + D
|
||||
mode += 1; if (mode == 3) mode = 0;
|
||||
if (mode == 1) {
|
||||
$('#wmd-input').hide();
|
||||
$('#wmd-preview').show();
|
||||
$('body').removeClass('fixedheight');
|
||||
$('html').removeClass('fixedheight');
|
||||
}
|
||||
else if (mode == 2) {
|
||||
$('#wmd-preview').hide();
|
||||
$('#wmd-input').show().css('float', 'none').css('width', '100%').focus();
|
||||
$('body').addClass('fixedheight');
|
||||
$('html').addClass('fixedheight');
|
||||
}
|
||||
else {
|
||||
$('#wmd-input').show().css('float', 'left').css('width', '50%').focus();
|
||||
$('#wmd-preview').show();
|
||||
}
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
else if (e.keyCode == 72 && (e.ctrlKey || e.metaKey) && e.shiftKey) { // CTRL + H
|
||||
$('#help').show();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
else if (e.keyCode == 55 && (e.ctrlKey || e.metaKey) && e.shiftKey) { // CTRL + SHIFT + 7
|
||||
const text = $('#wmd-input').val();
|
||||
let name = text.split("\n")[0].replaceAll("#", "")
|
||||
const xhr = new XMLHttpRequest();
|
||||
const cb = function (status, responseRaw) {
|
||||
const response = JSON.parse(responseRaw);
|
||||
if (status < 400 && response.Success) {
|
||||
localStorage.removeItem("writing");
|
||||
window.location.replace("/" + response.Payload)
|
||||
} else {
|
||||
$('feedback').innerHTML = status + ": " + response.Payload;
|
||||
}
|
||||
}
|
||||
xhr.open('POST', "/")
|
||||
xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) return cb(xhr.status, xhr.responseText) };
|
||||
const data = new FormData();
|
||||
data.append("text", text)
|
||||
data.append("name", name)
|
||||
xhr.send(data);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
else if (e.keyCode == 68 && (e.ctrlKey || e.metaKey) && e.shiftKey) { // CTRL + SHIFT + D
|
||||
darkmodeenabled = !darkmodeenabled;
|
||||
localStorage.setItem("darkmode", darkmodeenabled ? "1" : "0");
|
||||
toggledarkmode(darkmodeenabled);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
else if (e.keyCode == 82 && (e.ctrlKey || e.metaKey) && e.shiftKey) { // CTRL + SHIFT + R
|
||||
$('html').toggleClass('texroman');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
else if (e.keyCode == 76 && (e.ctrlKey || e.metaKey) && e.shiftKey) { // CTRL + SHIFT + L
|
||||
latexenabled = !latexenabled;
|
||||
localStorage.setItem("latex", latexenabled ? "1" : "0");
|
||||
togglemathjax(latexenabled);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
else if (e.keyCode == 79 && (e.ctrlKey || e.metaKey) && e.shiftKey) { // CTRL + SHIFT + O
|
||||
$('#openFileInput').click();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
else if (e.keyCode == 27) { // ESC
|
||||
$('#help').hide();
|
||||
}
|
||||
});
|
||||
|
||||
var mode = 0;
|
||||
var latexenabledonce = false;
|
||||
var latexenabled = localStorage.getItem("latex") !== "0";
|
||||
var darkmodeenabled = localStorage.getItem("darkmode") == "1";
|
||||
var converter = Markdown.getSanitizingConverter();
|
||||
Markdown.Extra.init(converter);
|
||||
var editor = new Markdown.Editor(converter, '');
|
||||
var mjpd1 = new mjpd();
|
||||
togglemathjax(latexenabled);
|
||||
toggledarkmode(darkmodeenabled);
|
||||
editor.run();
|
||||
</script>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2312083-14"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-2312083-14');</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user