diff --git a/index.php b/index.php
index 9500e8a797a9879dce1942b95b8d4e09b0193975..3b481121e8dc7e5984e1b2857e87d5f9836cf8b3 100644
--- a/index.php
+++ b/index.php
@@ -171,15 +171,15 @@
<option value="zenburn">Zenburn</option>
</select>
</label>
- <label for="html-math-method">Math render HTML
+ <label for="html-math-method">Math render
<select id="html-math-method" title="How math is rendered" onchange="pandoc()">
- <option id="math-plain" value="plain">Plain</option>
- <option id="math-gladtex" value="gladtex">GladTeX</option>
- <option id="math-katex" value="katex">KaTeX</option>
- <option id="math-mathjax" value="mathjax">MathJax</option>
- <option id="math-mathml" value="mathml">MathML</option>
- <option id="math-webtex" value="webtex">WebTeX</option>
- </select>
+ <option id="math-plain" value="plain">Plain</option>
+ <option id="math-gladtex" value="gladtex">GladTeX</option>
+ <option id="math-katex" value="katex">KaTeX</option>
+ <option id="math-mathjax" value="mathjax">MathJax</option>
+ <option id="math-mathml" value="mathml">MathML</option>
+ <option id="math-webtex" value="webtex">WebTeX</option>
+ </select>
</label>
</div>
<input type="button" id="example" name="example" value="Use markdown example" onclick="useExample()">
@@ -212,9 +212,7 @@ You can use this shortcut:
OSX: [ Ctrl ] + [ Opt ] + [ p ]
WIN: [ Alt ] + [ p ]" accesskey="p" onclick="pandoc(true)">Convert [p]</button>
</div>
- <div id="inputDub" class="grow-wrap">
- <textarea id="input" name="input"></textarea>
- </div>
+ <div id="input" role="textbox" aria-multiline="true" contenteditable="true"></div>
</div>
<div class="right">
<div class="flex-space-between">
@@ -230,10 +228,6 @@ WIN: [ Alt ] + [ c ]" accesskey="c" onclick="copyOutput()">Copy output field [c]
</div>
</main>
<script>
- // enable auto height on input textarea
- var inputField = document.getElementById("input");
- inputField.addEventListener("input", adaptTextareaSize());
- inputField.addEventListener("change", adaptTextareaSize());
// Error messages dialog
const dialog = document.getElementById("dialog");
const closeButtonDialog = document.querySelector("dialog button");
diff --git a/script.js b/script.js
index 43cfeff445d8a087c657b36769c09c1941d07c45..82856befbebb13fb13b0685e7c2fce70860a0146 100644
--- a/script.js
+++ b/script.js
@@ -52,7 +52,7 @@ function pandoc(alert) {
return;
}
var to = document.getElementById('to').value;
- var input = document.getElementById('input').value;
+ var input = document.getElementById('input').innerText;
if (isEmpty(input) && !useInputFile) {
if (alert === true) {
pushDialog("Error: Nothing to convert.\n\nYou must either write something into the 'Input field' or select a file as input in the 'Options'.", "error");
@@ -153,7 +153,7 @@ function setMainButtonsAppearance() {
if (useInputFile) {
inputFile = document.getElementById('inputfile').files[0];
}
- var input = document.getElementById('input').value;
+ var input = document.getElementById('input').innerText;
const output = document.getElementById('output');
// convert button setting
@@ -183,12 +183,12 @@ function setMainButtonsAppearance() {
function checkInputFile() {
if (document.getElementById('cb-inputfile').checked === true) {
document.getElementById('inputfile').removeAttribute("disabled");
- document.getElementById('input').setAttribute("disabled", "disabled");
+ document.getElementById('input').classList.add("disabled");
document.getElementById('label-inputfield').classList.add("disabled");
document.getElementById('output').innerText = "";
} else {
document.getElementById('inputfile').setAttribute("disabled", "disabled");
- document.getElementById('input').removeAttribute("disabled");
+ document.getElementById('input').classList.remove("disabled");
document.getElementById('label-inputfield').classList.remove("disabled");
}
}
@@ -229,18 +229,6 @@ async function copyOutput() {
return navigator.clipboard.write([clipboardItem]);
}
-// adapt height of textarea responding to the contents
-// it's only working with the corresponding css
-function adaptTextareaSize() {
- const growers = document.querySelectorAll(".grow-wrap");
- growers.forEach((grower) => {
- const textarea = grower.querySelector("textarea");
- textarea.addEventListener("input", () => {
- grower.dataset.replicatedValue = textarea.value;
- });
- });
-}
-
function pushDialog(text, type, elementById) {
var dialogText = document.getElementById('dialogText');
dialogText.innerText = text;
@@ -265,13 +253,10 @@ function isEmpty(string) {
function useExample() {
var inputField = document.getElementById("input");
- inputField.value = example;
+ inputField.innerText = example;
document.getElementById('from').value = 'markdown';
document.getElementById('cb-inputfile').checked = false;
checkInputFile();
- // fire onInput event to adapt height of textarea
- var eventInput = new Event('input', { bubbles: true });
- inputField.dispatchEvent(eventInput);
// execute pandoc to show example on preview
pandoc();
}
diff --git a/style.css b/style.css
index 0d77360515fc6fdef407450d899630239217935b..fc6c2d3aaf6304b7c8099da7927073ca1588fc4e 100644
--- a/style.css
+++ b/style.css
@@ -220,45 +220,7 @@ p.label {
flex-grow: 1;
}
-.grow-wrap {
- /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
- display: grid;
- flex-grow: 1;
- /* ersetzt den margin-bottom vom body
- da dieses Element bis zum Ende gehen soll */
- margin-bottom: var(--default-body-bottom-margin);
-}
-.grow-wrap::after {
- /* Note the weird space! Needed to preventy jumpy behavior */
- content: attr(data-replicated-value) " ";
- /* This is how textarea text behaves */
- white-space: pre-wrap;
- /* Hidden from view, clicks, and screen readers */
- visibility: hidden;
-}
-.grow-wrap > textarea {
- /* You could leave this, but after a user resizes, then it ruins the auto sizing */
- resize: none;
- /* Firefox shows scrollbar on growth, you can hide like this. */
- overflow: hidden;
-}
-.grow-wrap > textarea,
-.grow-wrap::after {
- /* Identical styling required!! */
- color: white;
- background-color: #555;
- font: inherit;
- font-size: inherit;
- padding: 0.5rem;
- margin-top: var(--default-top-padding);
- border: 1px solid white;
- outline: 1px solid white;
- /* min-height: 44vh; */
- /* Place on top of each other */
- grid-area: 1 / 1 / 2 / 2;
-}
-
-textarea#input:focus {
+#input:focus {
outline: 2px solid white;
}
@@ -289,7 +251,7 @@ button:disabled, input:disabled, textarea:disabled {
pointer-events: none;
}
-div.disabled, p.disabled, label.disabled, #output.disabled {
+div.disabled, p.disabled, label.disabled, #input.disabled, #output.disabled {
background-color: inherit;
color: #AAAAAA;
border-color: #AAAAAA;
@@ -330,7 +292,7 @@ div.download {
align-items: baseline;
}
-#output {
+#input, #output {
margin-top: var(--default-top-padding);
/* ersetzt den margin-bottom vom body
da dieses Element bis zum Ende gehen soll */
@@ -381,9 +343,6 @@ th {
.label-w-select {
flex-direction: column;
}
- .grow-wrap {
- /* grid-template-columns: 92vmin; */
- }
}
/* iPhone portait only */
@@ -391,5 +350,4 @@ th {
body {
/* font-size: 4vmin; */
}
-
}