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

feat: port across indent guides (formerly indentation lines)

Browse Source
This commit is contained in:
dragonwocky 2024-11-18 22:46:01 +11:00
parent 8e9dcfac95
commit 42bb015384
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
11 changed files with 240 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/core/menu/islands/Options.mjs
View File

@ -80,7 +80,14 @@ function Options({ mod }) {
const { html, modDatabase, setState } = globalThis.__enhancerApi;
return filterOptionsForRender(mod.options).map((opt) => {
opt.label ??= camelToSentenceCase(opt.key);
if (opt.type === "heading") return html`<${Heading}>${opt.label}<//>`;
if (opt.type === "heading") {
return typeof opt.description === "string"
? html`<div class="mb-[18px]">
<${Heading}>${opt.label}<//>
<${Description} innerHTML=${opt.description} />
</div>`
: html`<${Heading}>${opt.label}<//>`;
}
const _get = async () => (await modDatabase(mod.id)).get(opt.key),
_set = async (value) => {
await (await modDatabase(mod.id)).set(opt.key, value);

81
src/extensions/indent-guides/client.css Normal file
View File

@ -0,0 +1,81 @@
/**
* notion-enhancer: indent guides
* (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
body {
--guide--style: solid;
--guide--color: var(--theme--fg-border);
}
/* add indent guides to nested blocks */
.notion-header-block,
.notion-sub_header-block,
.notion-sub_sub_header-block,
.notion-toggle-block,
.notion-to_do-block,
.notion-bulleted_list-block,
.notion-numbered_list-block {
--guide--offset: 32px;
--guide--indent: 14px;
position: relative;
&:before {
content: "";
position: absolute;
height: calc(100% - var(--guide--offset));
top: var(--guide--offset);
margin-inline-start: var(--guide--indent);
border-left: 1px var(--guide--style) var(--guide--color);
}
}
.notion-header-block {
--guide--offset: 47px;
}
.notion-sub_header-block {
--guide--offset: 40px;
}
.notion-header-block,
.notion-sub_header-block,
.notion-sub_sub_header-block,
.notion-toggle-block {
--guide--indent: 13.4px;
}
/* add indent guides to toc blocks & the outliner */
.notion-table_of_contents-block
[contenteditable="false"]
a
> div:not([style*="margin-left: 0"]),
.notion-enhancer--outliner-heading:not(.pl-\[18px\]) {
position: relative;
--guide--indent: -16px;
&:before {
content: "";
top: 0;
position: absolute;
height: 100%;
margin-inline-start: var(--guide--indent);
border-left: 1px var(--guide--style) var(--guide--color);
}
}
.notion-enhancer--outliner-heading:not(.pl-\[18px\]) {
--guide--indent: -12px;
}
/* add solid background to drag handles,
otherwise guides show through underneath */
[role="button"]:is([aria-label="Drag"], [aria-label^="Click to add below"]) {
position: relative;
&:before {
content: "";
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background: var(--theme--bg-primary);
}
}

68
src/extensions/indent-guides/client.mjs Normal file
View File

@ -0,0 +1,68 @@
/**
* notion-enhancer: indent guides
* (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
export default async function (api, db) {
const lineType = await db.get("lineType"),
rainbowMode = await db.get("rainbowMode");
document.body.style.setProperty("--guide--style", lineType.toLowerCase());
// switch (await db.get(["style"])) {
// case "dashed":
// style = "dashed";
// break;
// case "dotted":
// style = "dotted";
// break;
// case "soft":
// opacity = 0.25;
// break;
// case "rainbow":
// opacity = 0.7;
// rainbow = true;
// break;
// }
// const colors = ['red', 'pink', 'purple', 'blue', 'green', 'yellow'];
// colors.push(...colors, ...colors, ...colors, 'gray');
// for (const listType of ['bulleted_list', 'numbered_list', 'to_do', 'toggle']) {
// if (!(await db.get([listType]))) continue;
// css += `
// .notion-page-content .notion-${listType}-block > div > div:last-child::before {
// border-left: 1px ${style} var(--indentation_lines--color, currentColor);
// opacity: ${opacity};
// }`;
// if (rainbow) {
// for (let i = 0; i < colors.length; i++) {
// css += `
// .notion-page-content ${`.notion-${listType}-block `.repeat(i + 1)}
// > div > div:last-child::before {
// --indentation_lines--color: var(--theme--text_${colors[i]});
// }`;
// }
// }
// }
// if (await db.get(['toggle_header'])) {
// css += `
// .notion-page-content [class$=header-block] > div > div > div:last-child::before {
// border-left: 1px ${style} var(--indentation_lines--color, currentColor);
// opacity: ${opacity};
// }`;
// if (rainbow) {
// for (let i = 0; i < colors.length; i++) {
// css += `
// .notion-page-content ${`[class$=header-block] `.repeat(i + 1)}
// > div > div > div:last-child::before{
// --indentation_lines--color: var(--theme--text_${colors[i]});
// }`;
// }
// }
// }
}

79
src/extensions/indent-guides/mod.json Normal file
View File

@ -0,0 +1,79 @@
{
"name": "Indent Guides",
"id": "35815b3b-3916-4dc6-8769-c9c2448f8b57",
"version": "0.3.0",
"description": "Marks list indentation with vertical lines to make it easy to follow.",
"tags": ["extension", "usability", "indentation-lines"],
"authors": [
{
"name": "dragonwocky",
"homepage": "https://dragonwocky.me/",
"avatar": "https://dragonwocky.me/avatar.jpg"
},
{
"name": "runargs",
"email": "alnbaldon@gmail.com",
"homepage": "http://github.com/runargs",
"avatar": "https://avatars.githubusercontent.com/u/39810066"
}
],
"options": [
{
"type": "select",
"key": "lineType",
"description": "The line style to use for indent guides.",
"values": ["Solid", "Dashed", "Dotted"]
},
{
"type": "toggle",
"key": "rainbowMode",
"description": "By default, indent guides are coloured based on the current theme. Rainbow mode uses alternating colours at each indent level to better connect corresponding blocks in longer lists.",
"value": false
},
{ "type": "heading", "label": "List Types" },
{
"type": "toggle",
"key": "to-doList",
"description": "Shows indent guides for Notion's to-do list blocks.",
"value": true
},
{
"type": "toggle",
"key": "bulletedList",
"description": "Shows indent guides for Notion's bulleted list blocks.",
"value": true
},
{
"type": "toggle",
"key": "numberedList",
"description": "Shows indent guides for Notion's numbered list blocks.",
"value": true
},
{
"type": "toggle",
"key": "toggleList",
"description": "Shows indent guides for Notion's toggle list blocks.",
"value": true
},
{
"type": "toggle",
"key": "toggleHeadings",
"description": "Shows indent guides for Notion's toggle heading blocks.",
"value": true
},
{
"type": "toggle",
"key": "tableOfContents",
"description": "Shows indent guides for Notion's table of contents blocks.",
"value": true
},
{
"type": "toggle",
"key": "outliner",
"description": "Shows indent guides for the Outliner's table of contents in the side panel.",
"value": true
}
],
"clientStyles": ["client.css"],
"clientScripts": ["client.mjs"]
}

101
src/extensions/indentation-lines/client.css
View File

@ -1,101 +0,0 @@
/**
* notion-enhancer: indentation lines
* (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
.notion-page-content .notion-bulleted_list-block > div > div:last-child,
.notion-page-content .notion-numbered_list-block > div > div:last-child,
.notion-page-content .notion-to_do-block > div > div:last-child,
.notion-page-content .notion-toggle-block > div > div:last-child,
.notion-page-content [class$='header-block'] > div > div > div:last-child,
.notion-page-content .notion-table_of_contents-block > div > div > a > div > div {
position: relative;
}
.notion-page-content .notion-bulleted_list-block > div > div:last-child::before,
.notion-page-content .notion-numbered_list-block > div > div:last-child::before,
.notion-page-content .notion-to_do-block > div > div:last-child::before,
.notion-page-content .notion-toggle-block > div > div:last-child::before,
.notion-page-content [class$='header-block'] > div > div > div:last-child::before,
.notion-page-content .pseudoSelection > div > div:last-child::before {
content: '';
position: absolute;
height: calc(100% - 2em);
top: 2em;
margin-inline-start: -14.48px;
}
.notion-page-content [class$='header-block'] > div > div > div:last-child::before {
margin-inline-start: -15.48px;
}
.notion-page-content
.notion-table_of_contents-block
> div
> div
> a
> div
> div:not([style*='margin-left: 0px'])
> div::before {
content: '';
position: absolute;
height: 100%;
top: 0;
margin-inline-start: -14.48px;
}
/* add background to block dragger */
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
[data-block-id],
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
[data-block-id] {
background: var(--theme--bg) !important;
border-radius: 3px;
}
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable,
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable {
left: -42px !important;
background: transparent !important;
}
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus,
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus {
border-radius: 3px;
width: 18px !important;
padding: 0 1px !important;
background: var(--theme--bg) !important;
}
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus:hover,
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus:hover {
background: var(--theme--ui_interactive-hover) !important;
}

109
src/extensions/indentation-lines/client.mjs
View File

@ -1,109 +0,0 @@
/**
* notion-enhancer: indentation lines
* (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
export default async function ({ web }, db) {
let style = 'solid',
opacity = 1,
rainbow = false;
switch (await db.get(['style'])) {
case 'dashed':
style = 'dashed';
break;
case 'dotted':
style = 'dotted';
break;
case 'soft':
opacity = 0.25;
break;
case 'rainbow':
opacity = 0.7;
rainbow = true;
break;
}
let css = '';
const colors = ['red', 'pink', 'purple', 'blue', 'green', 'yellow'];
colors.push(...colors, ...colors, ...colors, 'gray');
for (const listType of ['bulleted_list', 'numbered_list', 'to_do', 'toggle']) {
if (!(await db.get([listType]))) continue;
css += `
.notion-page-content .notion-${listType}-block > div > div:last-child::before {
border-left: 1px ${style} var(--indentation_lines--color, currentColor);
opacity: ${opacity};
}`;
if (rainbow) {
for (let i = 0; i < colors.length; i++) {
css += `
.notion-page-content ${`.notion-${listType}-block `.repeat(i + 1)}
> div > div:last-child::before {
--indentation_lines--color: var(--theme--text_${colors[i]});
}`;
}
}
}
if (await db.get(['toggle_header'])) {
css += `
.notion-page-content [class$=header-block] > div > div > div:last-child::before {
border-left: 1px ${style} var(--indentation_lines--color, currentColor);
opacity: ${opacity};
}`;
if (rainbow) {
for (let i = 0; i < colors.length; i++) {
css += `
.notion-page-content ${`[class$=header-block] `.repeat(i + 1)}
> div > div > div:last-child::before{
--indentation_lines--color: var(--theme--text_${colors[i]});
}`;
}
}
}
if (await db.get(['table_of_contents'])) {
css += `
.notion-page-content .notion-table_of_contents-block > div > div > a > div
> div:not([style*='margin-left: 0px']) > div::before {
border-left: 1px ${style} var(--indentation_lines--color, currentColor);
opacity: ${opacity};
}`;
if (rainbow) {
css += `
.notion-page-content .notion-table_of_contents-block > div > div > a > div
> div[style*='margin-left: 24px'] > div::before {
--indentation_lines--color: var(--theme--text_${colors[0]});
}
.notion-page-content .notion-table_of_contents-block > div > div > a > div
> div[style*='margin-left: 48px'] > div::before {
--indentation_lines--color: var(--theme--text_${colors[1]});
}`;
}
}
if (await db.get(['outliner'])) {
css += `
.outliner--header:not([style='--outliner--indent:0px;'])::before {
border-left: 1px ${style} var(--indentation_lines--color, currentColor);
opacity: ${opacity};
}`;
if (rainbow) {
css += `
.outliner--header[style='--outliner--indent:18px;']::before {
--indentation_lines--color: var(--theme--text_${colors[0]});
}
.outliner--header[style='--outliner--indent:36px;']::before {
--indentation_lines--color: var(--theme--text_${colors[1]});
}`;
}
}
web.render(document.head, web.html`<style>${css}</style>`);
}

BIN
src/extensions/indentation-lines/indentation-lines.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

72
src/extensions/indentation-lines/mod.json
View File

@ -1,72 +0,0 @@
{
"name": "indentation lines",
"id": "35815b3b-3916-4dc6-8769-c9c2448f8b57",
"version": "0.2.0",
"description": "adds vertical relationship lines to make list trees easier to follow.",
"preview": "indentation-lines.jpg",
"tags": ["extension", "usability"],
"authors": [
{
"name": "runargs",
"email": "alnbaldon@gmail.com",
"homepage": "http://github.com/runargs",
"avatar": "https://avatars.githubusercontent.com/u/39810066"
}
],
"css": {
"client": ["client.css"]
},
"js": {
"client": ["client.mjs"]
},
"options": [
{
"type": "select",
"key": "style",
"label": "style",
"values": ["solid", "dashed", "dotted", "soft", "rainbow"]
},
{
"type": "toggle",
"key": "bulleted_list",
"label": "bulleted lists",
"value": true
},
{
"type": "toggle",
"key": "numbered_list",
"label": "numbered lists",
"value": true
},
{
"type": "toggle",
"key": "to_do",
"label": "to-do lists",
"value": true
},
{
"type": "toggle",
"key": "toggle",
"label": "toggle lists",
"value": true
},
{
"type": "toggle",
"key": "toggle_header",
"label": "toggle headers",
"value": true
},
{
"type": "toggle",
"key": "table_of_contents",
"label": "tables of contents",
"value": true
},
{
"type": "toggle",
"key": "outliner",
"label": "outliner (panel extension)",
"value": true
}
]
}

4
src/extensions/line-numbers/mod.json
View File

@ -20,13 +20,13 @@
{
"type": "toggle",
"key": "numberSingleLines",
"description": "Add line numbers to code blocks with only one line.",
"description": "Adds line numbers to code blocks with only one line.",
"value": true
},
{
"type": "select",
"key": "decorationStyle",
"description": "Decorate line numbers with additional styling to distinguish them from code block content.",
"description": "Decorates line numbers with additional styling to distinguish them from code block content.",
"values": ["Border", "Background", "None"]
}
],

2
src/extensions/outliner/client.mjs
View File

@ -75,7 +75,7 @@ export default async (api, db) => {
},
getBlockOffset = ($block) => {
let offset = 0;
while (!$block.matches("[data-content-editable-root]")) {
while (!$block?.matches("[data-content-editable-root]")) {
offset += $block.offsetTop;
$block = $block.offsetParent;
}

1
src/registry.json
View File

@ -7,6 +7,7 @@
"extensions/outliner",
"extensions/word-counter",
"extensions/line-numbers",
"extensions/indent-guides",
"extensions/right-to-left",
"extensions/no-peeking",
"extensions/focus",