diff --git a/src/core/menu/islands/Options.mjs b/src/core/menu/islands/Options.mjs
index c06c38d..9c742a1 100644
--- a/src/core/menu/islands/Options.mjs
+++ b/src/core/menu/islands/Options.mjs
@@ -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`
+ <${Heading}>${opt.label}
+ <${Description} innerHTML=${opt.description} />
+
`
+ : 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);
diff --git a/src/extensions/indent-guides/client.css b/src/extensions/indent-guides/client.css
new file mode 100644
index 0000000..d3fe8ca
--- /dev/null
+++ b/src/extensions/indent-guides/client.css
@@ -0,0 +1,81 @@
+/**
+ * notion-enhancer: indent guides
+ * (c) 2020 Alexa Baldon (https://github.com/runargs)
+ * (c) 2024 dragonwocky (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);
+ }
+}
diff --git a/src/extensions/indent-guides/client.mjs b/src/extensions/indent-guides/client.mjs
new file mode 100644
index 0000000..762c2b6
--- /dev/null
+++ b/src/extensions/indent-guides/client.mjs
@@ -0,0 +1,68 @@
+/**
+ * notion-enhancer: indent guides
+ * (c) 2020 Alexa Baldon (https://github.com/runargs)
+ * (c) 2024 dragonwocky (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]});
+ // }`;
+ // }
+ // }
+ // }
+}
diff --git a/src/extensions/indent-guides/mod.json b/src/extensions/indent-guides/mod.json
new file mode 100644
index 0000000..6d43688
--- /dev/null
+++ b/src/extensions/indent-guides/mod.json
@@ -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"]
+}
diff --git a/src/extensions/indentation-lines/client.css b/src/extensions/indentation-lines/client.css
deleted file mode 100644
index bcb867a..0000000
--- a/src/extensions/indentation-lines/client.css
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * notion-enhancer: indentation lines
- * (c) 2020 Alexa Baldon (https://github.com/runargs)
- * (c) 2021 dragonwocky (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;
-}
diff --git a/src/extensions/indentation-lines/client.mjs b/src/extensions/indentation-lines/client.mjs
deleted file mode 100644
index 3cb8736..0000000
--- a/src/extensions/indentation-lines/client.mjs
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * notion-enhancer: indentation lines
- * (c) 2020 Alexa Baldon (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``);
-}
diff --git a/src/extensions/indentation-lines/indentation-lines.jpg b/src/extensions/indentation-lines/indentation-lines.jpg
deleted file mode 100644
index 0587e6d..0000000
Binary files a/src/extensions/indentation-lines/indentation-lines.jpg and /dev/null differ
diff --git a/src/extensions/indentation-lines/mod.json b/src/extensions/indentation-lines/mod.json
deleted file mode 100644
index 33a82d9..0000000
--- a/src/extensions/indentation-lines/mod.json
+++ /dev/null
@@ -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
- }
- ]
-}
diff --git a/src/extensions/line-numbers/mod.json b/src/extensions/line-numbers/mod.json
index cc2d35c..3f23b03 100755
--- a/src/extensions/line-numbers/mod.json
+++ b/src/extensions/line-numbers/mod.json
@@ -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"]
}
],
diff --git a/src/extensions/outliner/client.mjs b/src/extensions/outliner/client.mjs
index 7be9953..7cf677b 100644
--- a/src/extensions/outliner/client.mjs
+++ b/src/extensions/outliner/client.mjs
@@ -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;
}
diff --git a/src/registry.json b/src/registry.json
index f353a24..86f9dda 100644
--- a/src/registry.json
+++ b/src/registry.json
@@ -7,6 +7,7 @@
"extensions/outliner",
"extensions/word-counter",
"extensions/line-numbers",
+ "extensions/indent-guides",
"extensions/right-to-left",
"extensions/no-peeking",
"extensions/focus",