dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-04 12:49:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(line-numbers): granular dom updates

Browse Source
This commit is contained in:
dragonwocky 2024-05-28 00:36:23 +10:00
parent 493ab5aa63
commit 75a864db8c
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
1 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/extensions/line-numbers/client.mjs
View File

@ -5,11 +5,14 @@
* (https://notion-enhancer.github.io/) under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
function LineNumber({ number, height, ...props }) { function LineNumbers() {
const { html } = globalThis.__enhancerApi; const { html } = globalThis.__enhancerApi;
return html`<span class="block text-right" style="height:${height}px"> return html`<div
${number} class="notion-enhancer--line-numbers flex-grow
</span>`; text-([85%] [var(--theme--fg-secondary)] right)
font-[var(--font--code)] pt-[34px] pb-[32px]
overflow-hidden"
></div>`;
} }
export default async (api, db) => { export default async (api, db) => {
@ -17,61 +20,75 @@ export default async (api, db) => {
numberSingleLines = await db.get("numberSingleLines"), numberSingleLines = await db.get("numberSingleLines"),
lineNumberDecoration = await db.get("lineNumberDecoration"), lineNumberDecoration = await db.get("lineNumberDecoration"),
lineNumbersClass = "notion-enhancer--line-numbers", lineNumbersClass = "notion-enhancer--line-numbers",
codeBlockSelector = ".notion-code-block.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 = () => { const numberLines = () => {
for (const $block of document.querySelectorAll(codeBlockSelector)) { for (const $code of document.querySelectorAll(codeBlockSelector)) {
const $code = $block.lastElementChild,
computedStyles = getComputedStyle($code);
const wrap = $code.style.wordBreak === "break-all", const wrap = $code.style.wordBreak === "break-all",
lines = $code.innerText.split("\n"), lines = $code.innerText.split("\n"),
lineCount = Math.max(lines.length - 1, 1), lineCount = Math.max(lines.length - 1, 1),
lineNumDigits = (Math.log(lineCount) * Math.LOG10E + 1) | 0; lineNumDigits = (Math.log(lineCount) * Math.LOG10E + 1) | 0;
const update = const doUpdate =
parseInt($block.dataset.lines) !== lineCount || $code.dataset.lines !== String(lineCount) ||
$block.dataset.wrap !== String(wrap); $code.dataset.wrap !== String(wrap);
if (!update) continue; if (!doUpdate) continue;
$block.dataset.lines = lineCount; $code.dataset.lines = lineCount;
$block.dataset.wrap = wrap; $code.dataset.wrap = wrap;
// shrink block to allow space for numbers // shrink block to allow space for numbers
$block.style.justifyContent = "flex-end"; const width = `calc(100% - 32px - ${lineNumDigits}ch)`;
$code.style.minWidth = `calc(100% - 32px - ${lineNumDigits}ch)`; applyStyles($code.parentElement, { justifyContent: "flex-end" });
$code.style.maxWidth = $code.style.minWidth; applyStyles($code, { minWidth: width, maxWidth: width });
// get 1ch in pixels
const $tmp = html`<span style="width:1ch"> </span>`;
$code.append($tmp);
const charWidth = getComputedStyle($tmp).getPropertyValue("width");
$tmp.remove();
// work out height of wrapped lines // work out height of wrapped lines
const lineWidth = const lineHeight = getLineHeight($code),
parseFloat(computedStyles.getPropertyValue("width")) - charsPerLine = Math.floor(getLineWidth($code) / getCharWidth($code));
parseFloat(computedStyles.getPropertyValue("padding-left")) -
parseFloat(computedStyles.getPropertyValue("padding-right")),
charsPerLine = Math.floor(lineWidth / parseFloat(charWidth)),
lineHeight = parseFloat(computedStyles.getPropertyValue("line-height"));
const $numbers = html`<div // update line numbers in dom
class="${lineNumbersClass} font-[var(--font--code)] flex-grow let totalHeight = 34;
text-([85%] [var(--theme--fg-secondary)] right) pt-[34px] pb-[32px]" $code._$lineNumbers ||= LineNumbers();
></div>`;
for (let i = 1; i <= lineCount; i++) { for (let i = 1; i <= lineCount; i++) {
let lineSpan = 1; let $n = $code._$lineNumbers.children[i - 1];
if (wrap) lineSpan = Math.ceil(lines[i - 1].length / charsPerLine); if (!$n) {
$numbers.append( $n = html`<span class="block text-right">${i}</span>`;
html`<${LineNumber} $code._$lineNumbers.append($n);
number=${i} }
height=${(lineSpan || 1) * lineHeight} 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` });
const $prev = $block.getElementsByClassName(lineNumbersClass)[0]; if (!document.contains($code._$lineNumbers))
$prev ? $prev.replaceWith($numbers) : $block.prepend($numbers); $code.before($code._$lineNumbers);
} }
}; };