mirror of
https://github.com/pocketpy/pocketpy
synced 2025-10-31 00:40:16 +00:00
61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
function withLineNumbers(highlight, options = {}) {
|
|
const opts = Object.assign({ class: "codejar-linenumbers", wrapClass: "codejar-wrap", width: "35px", backgroundColor: "rgba(128, 128, 128, 0.15)", color: "" }, options);
|
|
let lineNumbers;
|
|
return function (editor) {
|
|
highlight(editor);
|
|
if (!lineNumbers) {
|
|
lineNumbers = init(editor, opts);
|
|
editor.addEventListener("scroll", () => lineNumbers.style.top = `-${editor.scrollTop}px`);
|
|
}
|
|
const code = editor.textContent || "";
|
|
|
|
//const linesCount = code.replace(/\n+$/, "\n").split("\n").length + 1;
|
|
const linesCount = code.split("\n").length;
|
|
|
|
let text = "";
|
|
for (let i = 1; i < linesCount; i++) {
|
|
text += `${i}\n`;
|
|
}
|
|
lineNumbers.innerText = text;
|
|
};
|
|
}
|
|
function init(editor, opts) {
|
|
const css = getComputedStyle(editor);
|
|
const wrap = document.createElement("div");
|
|
wrap.className = opts.wrapClass;
|
|
wrap.style.position = "relative";
|
|
const gutter = document.createElement("div");
|
|
gutter.className = opts.class;
|
|
wrap.appendChild(gutter);
|
|
// Add own styles
|
|
gutter.style.position = "absolute";
|
|
gutter.style.top = "0px";
|
|
gutter.style.left = "0px";
|
|
gutter.style.bottom = "0px";
|
|
gutter.style.width = opts.width;
|
|
gutter.style.overflow = "hidden";
|
|
gutter.style.backgroundColor = opts.backgroundColor;
|
|
gutter.style.color = opts.color || css.color;
|
|
gutter.style.setProperty("mix-blend-mode", "difference");
|
|
// Copy editor styles
|
|
gutter.style.fontFamily = css.fontFamily;
|
|
gutter.style.fontSize = css.fontSize;
|
|
gutter.style.lineHeight = css.lineHeight;
|
|
gutter.style.paddingTop = css.paddingTop;
|
|
gutter.style.paddingLeft = css.paddingLeft;
|
|
gutter.style.borderTopLeftRadius = css.borderTopLeftRadius;
|
|
gutter.style.borderBottomLeftRadius = css.borderBottomLeftRadius;
|
|
// Add line numbers
|
|
const lineNumbers = document.createElement("div");
|
|
lineNumbers.style.position = "relative";
|
|
lineNumbers.style.top = "0px";
|
|
gutter.appendChild(lineNumbers);
|
|
// Tweak editor styles
|
|
editor.style.paddingLeft = `calc(${opts.width} + ${gutter.style.paddingLeft})`;
|
|
editor.style.whiteSpace = "pre";
|
|
// Swap editor with a wrap
|
|
editor.parentNode.insertBefore(wrap, editor);
|
|
wrap.appendChild(editor);
|
|
return lineNumbers;
|
|
}
|