CentreMetre/CodeList
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Fix to use contenteditable div for individual line styling

Browse Source
This commit is contained in:
CentreMetre
2026-05-31 14:15:53 +01:00
parent bc8a3c2090
commit 45b4e0a106
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -33,7 +33,7 @@
</div> </div>
<div id="output"> <div id="output">
<div id="gutter"></div> <div id="gutter"></div>
<textarea id="output-area" class="output-area"></textarea> <div contenteditable="true" id="output-area" class="output-area"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -44,10 +44,13 @@
const gutter = document.getElementById("gutter"); const gutter = document.getElementById("gutter");
const outputArea = document.getElementById("output-area"); const outputArea = document.getElementById("output-area");
let lineCount = outputArea.value.split('\n').length; // 1 by default even though theres no \n because its splits by \n so its just 1 line let lineCount = getLineCount(); // 1 by default even though theres no \n because its splits by \n so its just 1 line
function getLineCount() { function getLineCount() {
return outputArea.value.split('\n').length; if (outputArea.children.length === 0) {
return 1
}
return outputArea.children.length;
} }
readOnlyCheckbox.addEventListener("change", (event) => { readOnlyCheckbox.addEventListener("change", (event) => {
@@ -56,7 +59,7 @@
function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
gutter.innerHTML = "" gutter.innerHTML = ""
console.log("update gutter line count")
for (let i = 0; i < lineCount; i++) { for (let i = 0; i < lineCount; i++) {