mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
97 lines
3.6 KiB
JavaScript
97 lines
3.6 KiB
JavaScript
/**
|
|
* notion-enhancer: line numbers
|
|
* (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
|
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
function LineNumbers() {
|
|
const { html } = globalThis.__enhancerApi;
|
|
return html`<div
|
|
class="notion-enhancer--line-numbers flex-grow
|
|
text-([85%] [var(--theme--fg-secondary)] right)
|
|
font-[var(--font--code)] pt-[34px] pb-[32px]
|
|
overflow-hidden"
|
|
></div>`;
|
|
}
|
|
|
|
export default async (api, db) => {
|
|
const { html, addMutationListener } = api,
|
|
numberSingleLines = await db.get("numberSingleLines"),
|
|
lineNumberDecoration = await db.get("lineNumberDecoration"),
|
|
lineNumbersClass = "notion-enhancer--line-numbers",
|
|
codeBlockSelector = ".notion-code-block.line-numbers > .notranslate";
|
|
|
|
// get character width in pixels
|
|
const getCharWidth = ($elem) => {
|
|
const $char = html`<span style="width:1ch"> </span>`;
|
|
$elem.append($char);
|
|
const charWidth = getComputedStyle($char).getPropertyValue("width");
|
|
$char.remove();
|
|
return parseFloat(charWidth);
|
|
},
|
|
// get line width in pixels
|
|
getLineWidth = ($elem) =>
|
|
parseFloat(getComputedStyle($elem).getPropertyValue("width")) -
|
|
parseFloat(getComputedStyle($elem).getPropertyValue("padding-left")) -
|
|
parseFloat(getComputedStyle($elem).getPropertyValue("padding-right")),
|
|
// get line height in pixels
|
|
getLineHeight = ($elem) =>
|
|
parseFloat(getComputedStyle($elem).getPropertyValue("line-height")),
|
|
// update inline styles without unnecessary dom updates
|
|
applyStyles = ($elem, styles) => {
|
|
for (const property in styles) {
|
|
if ($elem.style[property] === styles[property]) continue;
|
|
$elem.style[property] = styles[property];
|
|
}
|
|
};
|
|
|
|
const numberLines = () => {
|
|
for (const $code of document.querySelectorAll(codeBlockSelector)) {
|
|
const wrap = $code.style.wordBreak === "break-all",
|
|
lines = $code.innerText.split("\n"),
|
|
lineCount = Math.max(lines.length - 1, 1),
|
|
lineNumDigits = (Math.log(lineCount) * Math.LOG10E + 1) | 0;
|
|
|
|
const doUpdate =
|
|
$code.dataset.lines !== String(lineCount) ||
|
|
$code.dataset.wrap !== String(wrap);
|
|
if (!doUpdate) continue;
|
|
$code.dataset.lines = lineCount;
|
|
$code.dataset.wrap = wrap;
|
|
|
|
// shrink block to allow space for numbers
|
|
const width = `calc(100% - 32px - ${lineNumDigits}ch)`;
|
|
applyStyles($code.parentElement, { justifyContent: "flex-end" });
|
|
applyStyles($code, { minWidth: width, maxWidth: width });
|
|
|
|
// work out height of wrapped lines
|
|
const lineHeight = getLineHeight($code),
|
|
charsPerLine = Math.floor(getLineWidth($code) / getCharWidth($code));
|
|
|
|
// update line numbers in dom
|
|
let totalHeight = 34;
|
|
$code._$lineNumbers ||= LineNumbers();
|
|
for (let i = 1; i <= lineCount; i++) {
|
|
let $n = $code._$lineNumbers.children[i - 1];
|
|
if (!$n) {
|
|
$n = html`<span class="block text-right">${i}</span>`;
|
|
$code._$lineNumbers.append($n);
|
|
}
|
|
const height =
|
|
wrap && lines[i - 1].length > charsPerLine
|
|
? Math.ceil(lines[i - 1].length / charsPerLine) * lineHeight
|
|
: lineHeight;
|
|
applyStyles($n, { height: `${height}px` });
|
|
totalHeight += height;
|
|
}
|
|
applyStyles($code._$lineNumbers, { height: `${totalHeight}px` });
|
|
|
|
if (!document.contains($code._$lineNumbers))
|
|
$code.before($code._$lineNumbers);
|
|
}
|
|
};
|
|
|
|
addMutationListener(codeBlockSelector, numberLines);
|
|
};
|