Skip to content

Commit

Permalink
Monaco Editor Version
Browse files Browse the repository at this point in the history
  • Loading branch information
ohno committed Sep 27, 2024
1 parent 72a0564 commit f7cf24b
Show file tree
Hide file tree
Showing 8 changed files with 155 additions and 71 deletions.
40 changes: 21 additions & 19 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -264,30 +264,41 @@ footer {
}
}

.textareas__block__main {
.textareas__block__editor {
background: none;
border: none;
border-top: 1px solid #c6cdd5;
border-right: 1px solid #c6cdd5;
border-radius: 0 0 0 10px;
box-sizing: border-box;
font-family: Consolas;
font-size: 13px;
height: 420px;
min-height: 420px;
max-width: 100%;
}

.textareas__block__preview {
background: none;
border: none;
border-top: 1px solid #c6cdd5;
box-sizing: border-box;
font-family: Consolas;
font-size: 13px;
height: 420px;
min-height: 420px;
height: 100%;
max-width: 100%;
outline: none;
padding: 21px 25px;
resize: vertical;
padding: 21px 25px 0 25px;
width: 100%;
/* word-wrap: break-word; */
white-space: nowrap;
tab-size: 4;
overflow: scroll;
display: block;
border-radius: 0 0 10px 0;
}

@media screen and (max-width:840px) {
.textareas__block__main {
/* height: 300px; */
.textareas__block__preview {
width: 100%;
}
}
Expand All @@ -305,21 +316,12 @@ footer {
background: #c6cdd5;
}

.textareas__block--left > .textareas__block__main {
border-right: 1px solid #c6cdd5;
border-radius: 0 0 0 10px;
}

.textareas__block--right > .textareas__block__main {
border-radius: 0 0 10px 0;
}

@media screen and (max-width:840px) {
.textareas__block--left > .textareas__block__main {
.textareas__block--left > .textareas__block__preview {
border-radius: 0 0 0 0;
}

.textareas__block--right > .textareas__block__main {
.textareas__block--right > .textareas__block__preview {
border-radius: 0 0 10px 10px;
}
}
Expand Down
23 changes: 0 additions & 23 deletions assets/js/math.js

This file was deleted.

16 changes: 0 additions & 16 deletions assets/js/onload.js

This file was deleted.

120 changes: 120 additions & 0 deletions assets/js/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
// initial value
const searchParams = new URLSearchParams(window.location.search)
if (searchParams.has('input') && !(searchParams.get('input')=="")) {
var initialInput = searchParams.get('input');
} else {
var initialInput = `Hello!
\\begin{align}
f(x) &= x + 1 \\\\
g(x) &= x - 1
\\end{align}
Start writing!
`;
}

// setup editor
require.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });
require(["vs/editor/editor.main"], function () {
// LaTeX language definition
// https://github.com/microsoft/monaco-editor/issues/3233
// https://github.com/koka-lang/madoko/blob/master/styles/lang/latex.json
monaco.languages.register({ id: 'latex' });
monaco.languages.setMonarchTokensProvider("latex", {
"displayName": "Latex",
"name": "latex",
"mimeTypes": ["text/latex","text/tex"],
"fileExtensions": ["tex","sty","cls"],

"lineComment": "% ",

"builtin": [
"addcontentsline", "addtocontents", "addtocounter", "address", "addtolength", "addvspace", "alph", "appendix",
"arabic", "author", "backslash", "baselineskip", "baselinestretch", "bf", "bibitem", "bigskipamount", "bigskip",
"boldmath", "boldsymbol", "cal", "caption", "cdots", "centering", "chapter", "circle", "cite", "cleardoublepage",
"clearpage", "cline", "closing", "color", "copyright", "dashbox", "date", "ddots", "documentclass", "dotfill", "em",
"emph", "ensuremath", "epigraph", "euro", "fbox", "flushbottom", "fnsymbol", "footnote", "footnotemark",
"footnotesize", "footnotetext", "frac", "frame", "framebox", "frenchspacing", "hfill", "hline", "href", "hrulefill",
"hspace", "huge", "Huge", "hyphenation", "include", "includegraphics", "includeonly", "indent", "input", "it", "item",
"kill", "label", "large", "Large", "LARGE", "LaTeX", "LaTeXe", "ldots", "left", "lefteqn", "line", "linebreak",
"linethickness", "linewidth", "listoffigures", "listoftables", "location", "makebox", "maketitle", "markboth",
"mathcal", "mathop", "mbox", "medskip", "multicolumn", "multiput", "newcommand", "newcolumntype", "newcounter",
"newenvironment", "newfont", "newlength", "newline", "newpage", "newsavebox", "newtheorem", "nocite", "noindent",
"nolinebreak", "nonfrenchspacing", "normalsize", "nopagebreak", "not", "onecolumn", "opening", "oval", "overbrace",
"overline", "pagebreak", "pagenumbering", "pageref", "pagestyle", "par", "paragraph", "parbox", "parindent", "parskip",
"part", "protect", "providecommand", "put", "raggedbottom", "raggedleft", "raggedright", "raisebox", "ref",
"renewcommand", "right", "rm", "roman", "rule", "savebox", "sbox", "sc", "scriptsize", "section", "setcounter",
"setlength", "settowidth", "sf", "shortstack", "signature", "sl", "slash", "small", "smallskip", "sout", "space", "sqrt",
"stackrel", "stepcounter", "subparagraph", "subsection", "subsubsection", "tableofcontents", "telephone", "TeX",
"textbf", "textcolor", "textit", "textmd", "textnormal", "textrm", "textsc", "textsf", "textsl", "texttt", "textup",
"textwidth", "textheight", "thanks", "thispagestyle", "tiny", "title", "today", "tt", "twocolumn", "typeout", "typein",
"uline", "underbrace", "underline", "unitlength", "usebox", "usecounter", "uwave", "value", "vbox", "vcenter", "vdots",
"vector", "verb", "vfill", "vline", "vphantom", "vspace",

"RequirePackage", "NeedsTeXFormat", "usepackage", "input", "include", "documentclass", "documentstyle",
"def","edef","defcommand","if","ifdim","ifnum","ifx","fi","else","begingroup","endgroup",
"definecolor","textcolor","color",
"eifstrequal","eeifstrequal"
],
"tokenizer": {
"root": [
["(\\\\begin)(\\s*)(\\{)([\\w\\-\\*\\@]+)(\\})",
["keyword.predefined","white","@brackets",{ "token": "tag.env-$4", "bracket": "@open" },"@brackets"]],
["(\\\\end)(\\s*)(\\{)([\\w\\-\\*\\@]+)(\\})",
["keyword.predefined","white","@brackets",{ "token": "tag.env-$4", "bracket": "@close" }, "@brackets" ]],
["\\\\[^a-zA-Z@]", "keyword" ],
["\\@[a-zA-Z@]+", "keyword.at" ],
["\\\\([a-zA-Z@]+)", { "cases": {
"$1@builtin": "keyword.predefined",
"@default": "keyword"
}}],
{ "include": "@whitespace" },
["[{}()\\[\\]]", "@brackets"],
["#+\\d", "number.arg"],
["\\-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)\\s*(?:em|ex|pt|pc|sp|cm|mm|in)", "number.len"]
],

"whitespace": [
["[ \\t\\r\\n]+", "white"],
["%.*$", "comment"]
]
}
});
// create editor
var editor = monaco.editor.create(
document.getElementById("input"),
{
value: initialInput,
language: "latex",
automaticLayout: true,
}
);
// editor.layout({ width, height: contentHeight });
// first preview
math(editor.getValue());
// onInput preview
editor.getModel().onDidChangeContent((event) => {
console.log(editor.getValue());
math(editor.getValue());
});
});

// update LaTeX viewer
function math(input) {
// update URL
let url = new URL(window.location.href);
let params = url.searchParams;
params.set('input', input);
history.pushState(null, null, url);
// escape
input = input.replace(/</g, "&lt;");
input = input.replace(/>/g, "&gt;");
document.getElementById('output').innerHTML = input;
// https://qiita.com/kosuke_shimizu/items/187467354c32a7e18d07
// https://docs.mathjax.org/en/v3.2-latest/web/typeset.html#handling-asynchronous-typesetting
MathJax.typesetPromise().then(() => {
// modify the DOM here
MathJax.typesetPromise();
}).catch((err) => console.log(err.message));
}
6 changes: 0 additions & 6 deletions assets/js/url.js

This file was deleted.

10 changes: 5 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@
<link rel="icon" href="./assets/img/favicon.svg" type="image/svg+xml"/>
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/style.css">
<script src="./assets/js/url.js"></script>
<script src="./assets/js/onload.js"></script>
<script src="./assets/js/math.js"></script>
<!-- https://docs.mathjax.org/en/latest/web/configuration.html?highlight=heading#configuration-using-an-in-line-script -->
<script>
MathJax = {
Expand All @@ -26,6 +23,9 @@
</script>
<!-- https://docs.mathjax.org/en/latest/web/hosting.html#getting-mathjax-via-git -->
<script src="./node_modules/mathjax/es5/tex-chtml.js" id="MathJax-script" async></script>
<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
<!-- <script src="./node_modules/monaco-latex/dist/index.js"></script> -->
<script src="./assets/js/script.js"></script>
</head>

<body>
Expand All @@ -50,7 +50,7 @@ <h2 class="textareas__block__header">
<!-- <img src ="./assets/img/input.svg"/> -->
\$f(x)=x^2\$
</h2>
<textarea class="textareas__block__main" id="input" cols="30" rows="10" onInput="document.getElementById('output').value=math(this.value)"></textarea>
<div class="textareas__block__editor" id="input"></div>
</div>
<div class="textareas__block--right" id="right">
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0,0 L0,24 12,12"/></svg>
Expand All @@ -59,7 +59,7 @@ <h2 class="textareas__block__header">
<g>$f(x)=x^2$</g>
</h2>
<!-- https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard -->
<div class="textareas__block__main" id="output"></div>
<div class="textareas__block__preview" id="output"></div>
</div>
</section>

Expand Down
8 changes: 7 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"dependencies": {
"mathjax": "^3.2.2"
"mathjax": "^3.2.2",
"monaco-editor": "^0.52.0"
}
}

0 comments on commit f7cf24b

Please sign in to comment.