chore: add directoryMode flag to enhanceApp for notion-repackaged

use https://www.notion.so/api/__notion-enhancer for internal asset proxy

README.md

@@ -1,5 +1,5 @@
 # notion-enhancer/desktop
 
-an enhancer/customiser for the all-in-one productivity workspace notion.so (app)
+Customise the all-in-one productivity workspace Notion.
 
 [read the docs online](https://notion-enhancer.github.io/)

package.json

@@ -2,7 +2,7 @@
   "name": "notion-enhancer",
   "version": "0.11.1",
   "author": "dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)",
-  "description": "An enhancer/customiser for the all-in-one productivity workspace Notion",
+  "description": "Customise the all-in-one productivity workspace Notion.",
   "homepage": "https://notion-enhancer.github.io",
   "repository": "github:notion-enhancer/desktop",
   "bugs": "https://github.com/notion-enhancer/desktop/issues",

scripts/enhance-desktop-app.mjs

@@ -93,27 +93,42 @@ const backupApp = async () => {
     await fsp.rename(archive + ".bak", archive);
     return true;
   },
-  enhanceApp = async (debug = false) => {
+  enhanceApp = async (debug = false, directoryMode = false) => {
     const app = getResourcePath("app"),
       archive = getResourcePath("app.asar");
-    if (!existsSync(archive)) return false;
-    if (existsSync(app)) await fsp.rm(app, { recursive: true, force: true });
-    await fsp.mkdir(app);
-    // extract archive to folder and apply patches
-    for (let file of asar.listPackage(archive)) {
-      file = file.replace(/^\//g, "");
-      const stat = asar.statFile(archive, file),
-        isFolder = !!stat.files,
-        isSymlink = !!stat.link,
-        isExecutable = stat.executable,
-        appPath = resolve(app, file);
-      if (isFolder) {
-        await fsp.mkdir(appPath);
-      } else if (isSymlink) {
-        await fsp.symlink(appPath, resolve(app, link));
-      } else {
-        await fsp.writeFile(appPath, patch(file, extractFile(file)));
-        if (isExecutable) await fsp.chmod(appPath, "755");
+    // directory mode acts on pre-extracted sources
+    // as part of the notion-repackaged build process
+    if (directoryMode) {
+      if (!existsSync(app)) return false;
+      for (let file of await fsp.readdir(app, { recursive: true })) {
+        file = file.replace(/^\//g, "");
+        const appPath = resolve(app, file),
+          stat = await fsp.stat(appPath);
+        if (stat.isFile()) {
+          const content = await fsp.readFile(appPath);
+          await fsp.writeFile(appPath, patch(file, content));
+        }
+      }
+    } else {
+      if (!existsSync(archive)) return false;
+      if (existsSync(app)) await fsp.rm(app, { recursive: true, force: true });
+      await fsp.mkdir(app);
+      // extract archive to folder and apply patches
+      for (let file of asar.listPackage(archive)) {
+        file = file.replace(/^\//g, "");
+        const stat = asar.statFile(archive, file),
+          isFolder = !!stat.files,
+          isSymlink = !!stat.link,
+          isExecutable = stat.executable,
+          appPath = resolve(app, file);
+        if (isFolder) {
+          await fsp.mkdir(appPath);
+        } else if (isSymlink) {
+          await fsp.symlink(appPath, resolve(app, link));
+        } else {
+          await fsp.writeFile(appPath, patch(file, extractFile(file)));
+          if (isExecutable) await fsp.chmod(appPath, "755");
+        }
       }
     }
     // insert the notion-enhancer/src folder into notion's node_modules
@@ -126,10 +141,12 @@ const backupApp = async () => {
       excludes = ["bin", "type", "scripts", "engines", "dependencies"];
     for (const key of excludes) delete manifest[key];
     await fsp.writeFile(insertManifest, JSON.stringify(manifest));
-    // re-package enhanced sources into executable archive
-    await asar.createPackage(app, archive);
-    // cleanup extracted files unless in debug mode
-    if (!debug) await fsp.rm(app, { recursive: true });
+    if (!directoryMode) {
+      // re-package enhanced sources into executable archive
+      await asar.createPackage(app, archive);
+      // cleanup extracted files unless in debug mode
+      if (!debug) await fsp.rm(app, { recursive: true });
+    }
     return true;
   };
 

scripts/patch-desktop-app.mjs

@@ -36,11 +36,15 @@ const patches = {
         (content = replaceIfNotFound(
           { string: content, mode: "prepend" },
           ...args
+        )),
+      append = (...args) =>
+        (content = replaceIfNotFound(
+          { string: content, mode: "append" },
+          ...args
         ));
 
     // https://github.com/notion-enhancer/notion-enhancer/issues/160:
-    // enable the notion:// protocol, windows-style tab layouts, and
-    // quitting the app when the last window is closed on linux
+    // run the app in windows mode on linux (instead of macos mode)
     const isWindows =
         /(?:"win32"===process\.platform(?:(?=,isFullscreen)|(?=&&\w\.BrowserWindow)|(?=&&\(\w\.app\.requestSingleInstanceLock)))/g,
       isWindowsOrLinux = '["win32","linux"].includes(process.platform)';
@@ -50,15 +54,6 @@ const patches = {
     // so the notion-enhancer can be require()-d into it
     replace(/sandbox:!0/g, `sandbox:!1,nodeIntegration:!0,session:require('electron').session.fromPartition("persist:notion")`);
 
-    // bypass webRequest filter to load enhancer menu
-    replace(/(\w)\.top!==\w\?(\w)\(\{cancel:!0\}\)/, "$1.top!==$1?$2({})");
-
-    // https://github.com/notion-enhancer/desktop/issues/291
-    // bypass csp issues by intercepting the notion:// protocol
-    const protocolHandler = /try\{const \w=await \w\.assetCache\.handleRequest\(\w\);/,
-      protocolInterceptor = `{const n="notion://www.notion.so/__notion-enhancer/";if(e.url.startsWith(n))return require("electron").net.fetch(\`file://\${require("path").join(__dirname,"..","..","node_modules","notion-enhancer",e.url.slice(n.length))}\`)}`;
-    prepend(protocolHandler, protocolInterceptor);
-    
     // expose the app's config + cache + preferences to the global namespace
     // e.g. to enable development mode or check if keep in background is enabled
     prepend(/\w\.exports=JSON\.parse\('\{"env":"production"/, "globalThis.__notionConfig=");

src/api/system.js

@@ -21,11 +21,12 @@ const platform = IS_ELECTRON
   version = IS_ELECTRON
     ? require("notion-enhancer/package.json").version
     : chrome.runtime.getManifest().version,
-  // forms a url to a notion-enhancer asset or source file
-  // that can be accessed reliably over http
-  enhancerUrl = (target) =>
+  // packages a url to access notion-enhancer assets and sources,
+  // proxies via api in desktop app to bypass service worker cache
+  enhancerUrl = (target = "") =>
     IS_ELECTRON
-      ? `notion://www.notion.so/__notion-enhancer/${target.replace(/^\//, "")}`
+      ? "https://www.notion.so/api/__notion-enhancer/" +
+        target.replace(/^\//, "")
       : chrome.runtime.getURL(target),
   // require a file from the root of notion's app/ folder,
   // only available in an electron main process
@@ -96,10 +97,6 @@ const readFile = (file) => {
           { resolve } = require("path");
         return fsp.readFile(resolve(`${__dirname}/../${file}`), "utf-8");
       }
-      // prefer using versions of files cached by the app
-      // or routed through the notion-enhancer's url interception
-      const notionProtocol = "notion://www.notion.so/";
-      file = file.replace(/^https:\/\/www\.notion\.so\//, notionProtocol);
     } else file = file.startsWith("http") ? file : enhancerUrl(file);
     return fetch(file).then((res) => res.text());
   },
@@ -112,8 +109,6 @@ const readFile = (file) => {
         const { resolve } = require("path");
         return require(resolve(`${__dirname}/../${file}`));
       }
-      const notionProtocol = "notion://www.notion.so/";
-      file = file.replace(/^https:\/\/www\.notion\.so\//, notionProtocol);
     } else file = file.startsWith("http") ? file : enhancerUrl(file);
     return fetch(file).then((res) => res.json());
   };

src/core/client.mjs

@@ -37,17 +37,19 @@ const shouldLoadThemeOverrides = async (api, db) => {
     const { html } = api,
       customStyles = (await db.get("customStyles"))?.content;
     if (!customStyles) return;
-    return document.head.append(html`<style>
-      ${customStyles}
-    </style>`);
+    const $customStyles = html`<style
+      id="__custom"
+      innerHTML=${customStyles}
+    ></style>`;
+    return document.head.append($customStyles);
   };
 
 const insertMenu = async (api, db) => {
-  const notionSidebar = `.notion-sidebar-container .notion-sidebar > :nth-child(3) > div > :nth-child(2)`,
-    notionSidebarButtons = `${notionSidebar} > [role="button"]`,
+  const inviteMember = `.notion-sidebar-container .notion-sidebar [role="button"]:has(.inviteMember)`,
     { html, addMutationListener, removeMutationListener } = api,
     { addKeyListener, platform, enhancerUrl, onMessage } = api,
     menuButtonIconStyle = await db.get("menuButtonIconStyle"),
+    menuButtonLabel = await db.get("menuButtonLabel"),
     openMenuHotkey = await db.get("openMenuHotkey"),
     menuPing = {
       channel: "notion-enhancer",
@@ -85,21 +87,18 @@ const insertMenu = async (api, db) => {
       icon="notion-enhancer${menuButtonIconStyle === "Monochrome"
         ? "?mask"
         : " text-[16px]"}"
-      >notion-enhancer
+      >${menuButtonLabel}
     <//>`;
   const appendToDom = () => {
-    document.body.append($modal);
-    const btns = document.querySelectorAll(notionSidebarButtons);
-    for (const $btn of btns) {
-      if ($btn.textContent.includes("Settings")) $btn.after($button);
-    }
-    const appended = document.contains($modal) && document.contains($button);
-    if (appended) removeMutationListener(appendToDom);
+    if (!document.body.contains($modal)) document.body.append($modal);
+    else if (!document.body.contains($button)) {
+      document.querySelector(inviteMember)?.after($button);
+    } else removeMutationListener(appendToDom);
   };
   html`<${Tooltip}>
     <b>Configure the notion-enhancer and its mods</b>
   <//>`.attach($button, "right");
-  addMutationListener(notionSidebar, appendToDom);
+  addMutationListener(inviteMember, appendToDom);
   addMutationListener(".notion-app-inner", updateMenuTheme, { subtree: false });
   appendToDom();
 

src/core/islands/MenuButton.mjs

@@ -15,10 +15,10 @@ function MenuButton(
     class: `notion-enhancer--menu-button flex select-none
     cursor-pointer rounded-[6px] text-[14px] font-medium
     transition hover:bg-[color:var(--theme--bg-hover)]
-    w-full h-[30px] px-[8px] py-[4px] items-center`,
+    w-full h-[30px] px-[10px] py-[4px] items-center`,
   });
   return html`<div ...${props}>
-    <div class="flex items-center justify-center size-[22px] mr-[8px]">
+    <div class="flex items-center justify-center text-[18px] mr-[10px]">
       <i class="i-${icon}"></i>
     </div>
     <div>${children}</div>

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`<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);

src/core/mod.json

@@ -2,7 +2,7 @@
   "name": "notion-enhancer",
   "version": "0.11.1",
   "id": "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
-  "description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
+  "description": "Customise the all-in-one productivity workspace Notion.",
   "tags": ["core"],
   "authors": [
     {
@@ -44,10 +44,16 @@
       "description": "Loads the styling required for a theme to customise Notion's interface. Disabling this may increase client performance, but will also disable all themes.",
       "values": ["Auto", "Enabled", "Disabled"]
     },
+    {
+      "type": "text",
+      "key": "menuButtonLabel",
+      "description": "Sets the text to label the notion-enhancer button added to Notion's sidebar with.",
+      "value": "notion-enhancer"
+    },
     {
       "type": "select",
       "key": "menuButtonIconStyle",
-      "description": "Sets whether the notion-enhancer icon added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
+      "description": "Sets whether the icon beside the notion-enhancer button added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
       "values": ["Colour", "Monochrome"]
     },
     {
@@ -73,7 +79,7 @@
       "key": "developerMode",
       "description": "Activates built-in debugging tools accessible through the application menu.",
       "platforms": ["linux", "win32", "darwin"],
-      "value": true
+      "value": false
     }
   ],
   "clientStyles": ["variables.css", "../vendor/@unocss-preflight-tailwind.css"],

src/extensions/indent-guides/client.css

@@ -0,0 +1,84 @@
+/**
+ * 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);
+  --guide--opacity: 0;
+}
+
+/* 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);
+    opacity: var(--guide--opacity);
+  }
+}
+
+.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);
+    opacity: var(--guide--opacity);
+  }
+}
+
+.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);
+  }
+}

src/extensions/indent-guides/client.mjs

@@ -0,0 +1,66 @@
+/**
+ * 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 { html } = api,
+    guideStyle = await db.get("guideStyle"),
+    rainbowMode = await db.get("rainbowMode");
+  document.body.style.setProperty("--guide--style", guideStyle.toLowerCase());
+
+  const nestedTargets = [],
+    outlineTargets = [];
+  for (const [listType, selectors] of [
+    ["to-doList", [".notion-to_do-block"]],
+    ["bulletedList", [".notion-bulleted_list-block"]],
+    ["numberedList", [".notion-numbered_list-block"]],
+    ["toggleList", [".notion-toggle-block"]],
+    [
+      "toggleHeadings",
+      [
+        ".notion-header-block",
+        ".notion-sub_header-block",
+        ".notion-sub_sub_header-block",
+      ],
+    ],
+  ]) {
+    if (await db.get(listType)) nestedTargets.push(...selectors);
+  }
+  if (await db.get("tableOfContents"))
+    outlineTargets.push(".notion-table_of_contents-block");
+  if (await db.get("outliner"))
+    outlineTargets.push(".notion-enhancer--outliner-heading");
+
+  let css = `${[...nestedTargets, ...outlineTargets].join(",")} {
+    --guide--opacity: 1;
+  }`;
+  if (rainbowMode) {
+    const opacity = `--guide--opacity: 0.5;`,
+      selector = `:is(${nestedTargets.join(",")})`,
+      colours = ["green", "blue", "purple", "pink", "red", "orange", "yellow"];
+    colours.push(...colours, ...colours, ...colours, "gray");
+    for (let i = 0; i < colours.length; i++) {
+      css += `${(selector + " ").repeat(i + 1)} {
+        --guide--color: var(--theme--fg-${colours[i]});
+        ${opacity}
+      }`;
+    }
+    css += `
+    .notion-table_of_contents-block [contenteditable="false"] a
+      > div[style*="margin-left: 24px"],
+    .notion-enhancer--outliner-heading.pl-\\[36px\\] {
+      --guide--color: var(--theme--fg-${colours[0]});
+       ${opacity}
+    }
+    .notion-table_of_contents-block [contenteditable="false"] a
+      > div[style*="margin-left: 48px"],
+    .notion-enhancer--outliner-heading.pl-\\[54px\\] {
+      --guide--color: var(--theme--fg-${colours[1]});
+       ${opacity}
+    }`;
+  }
+  document.head.append(html`<style innerHTML=${css}></style>`);
+}

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": "guideStyle",
+      "description": "The type of line 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"]
+}

src/extensions/indentation-lines/client.css

@@ -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;
-}

src/extensions/indentation-lines/client.mjs

@@ -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>`);
-}

src/extensions/indentation-lines/mod.json

@@ -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
-    }
-  ]
-}

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"]
     }
   ],

src/extensions/outliner/client.mjs

@@ -40,6 +40,17 @@ export default async (api, db) => {
     </section>`,
   });
 
+  const replaceFloatingOutline = await db.get("replaceFloatingOutline");
+  if (replaceFloatingOutline) {
+    document.head.append(html`<style>
+      .hide-scrollbar.ignore-scrolling-container:has(
+          div:empty[style*="width"]
+        ) {
+        display: none !important;
+      }
+    </style>`);
+  }
+
   let $page, $scroller;
   const getHeadings = () => {
       if (!$page) return [];
@@ -64,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;
       }
@@ -73,10 +84,17 @@ export default async (api, db) => {
     updateHeadings = debounce(() => {
       $toc.innerHTML = "";
       if (!$page) return;
+      let indent = 0,
+        prev_level = 0;
       const $frag = document.createDocumentFragment();
       for (const $heading of getHeadings()) {
+        const level = getHeadingLevel($heading);
+        if (level === 1) indent = 1;
+        else if (level > prev_level) indent = Math.min(indent + 1, level);
+        else if (level < prev_level) indent = Math.max(indent - 1, level);
+        prev_level = level;
         $heading._$outline = html`<${Heading}
-          indent=${getHeadingLevel($heading)}
+          ...${{ indent }}
           onclick=${() => {
             if (!$scroller) return;
             const top = getBlockOffset($heading) - 24;

src/extensions/outliner/mod.json

@@ -3,7 +3,9 @@
   "version": "0.5.0",
   "id": "87e077cc-5402-451c-ac70-27cc4ae65546",
   "description": "Adds a table of contents to the side panel to overview and navigate the current page's headings and subheadings.",
-  "tags": ["panel"],
+  "tags": [
+    "panel"
+  ],
   "authors": [
     {
       "name": "dragonwocky",
@@ -28,7 +30,15 @@
       "key": "equationRendering",
       "description": "Attempts to render special symbols from inline equations in headings. Note that position- and size-based formatting will be lost when displaying equations in the Outliner's table of contents. Disable this to display the raw TeX equation instead.",
       "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "replaceFloatingOutline",
+      "description": "Disables Notion's builtin floating table of contents for a complete switch to the Outliner.",
+      "value": true
     }
   ],
-  "clientScripts": ["client.mjs"]
-}
+  "clientScripts": [
+    "client.mjs"
+  ]
+}

src/extensions/topbar/client.mjs

@@ -15,7 +15,7 @@ const pinLabel = "Pin always on top",
 
 export default async function (api, db) {
   const { html, sendMessage } = api,
-    { addMutationListener, removeMutationListener } = api,
+    { addMutationListener } = api,
     displayLabel = ($btn) => {
       if ($btn.innerHTML === $btn.ariaLabel) return;
       $btn.style.width = "auto";
@@ -104,6 +104,7 @@ export default async function (api, db) {
     }
   });
 
+  if (!["linux", "win32", "darwin"].includes(api.platform)) return;
   const alwaysOnTopButton = await db.get("alwaysOnTopButton");
   if (alwaysOnTopButton === "Disabled") return;
   const notionTopbar = ".notion-topbar",

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "notion-enhancer",
   "version": "0.11.1",
   "author": "dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)",
-  "description": "An enhancer/customiser for the all-in-one productivity workspace Notion",
+  "description": "Customise the all-in-one productivity workspace Notion.",
   "homepage_url": "https://notion-enhancer.github.io",
   "content_scripts": [{ "matches": ["*://*.notion.so/*"], "js": ["/init.js"] }],
   "background": { "service_worker": "/worker.js" },

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",

src/worker.js

@@ -113,15 +113,31 @@ const initDatabase = async () => {
   };
 
 if (IS_ELECTRON) {
-  const { ipcMain } = require("electron"),
-    { reloadApp } = globalThis.__enhancerApi;
-  ipcMain.handle("notion-enhancer", ({}, message) => {
-    if (message?.action !== "query-database") return;
-    const { namespace, query, args } = message.data;
-    return queryDatabase(namespace, query, args);
-  });
-  ipcMain.on("notion-enhancer", ({}, message) => {
-    if (message === "reload-app") reloadApp();
+  const { reloadApp, enhancerUrl } = globalThis.__enhancerApi,
+    { ipcMain, session, app, net } = require("electron");
+  app.on("ready", () => {
+    // proxies notion-enhancer sources over www.notion.so via https
+    const { protocol } = session.fromPartition("persist:notion");
+    protocol.handle("https", (req) => {
+      if (req.url.startsWith(enhancerUrl())) {
+        let url = req.url.slice(enhancerUrl().length);
+        url = `file://${require("path").join(__dirname, url)}`;
+        return net.fetch(url);
+      } else return net.fetch(req);
+    });
+    // webRequest.onHeadersReceived(({ details: { responseHeaders }, callback }) => {
+    //   delete responseHeaders["content-security-policy"];
+    //   return callback({ responseHeaders });
+    // });
+
+    ipcMain.handle("notion-enhancer", ({}, message) => {
+      if (message?.action !== "query-database") return;
+      const { namespace, query, args } = message.data;
+      return queryDatabase(namespace, query, args);
+    });
+    ipcMain.on("notion-enhancer", ({}, message) => {
+      if (message === "reload-app") reloadApp();
+    });
   });
 } else {
   const notionUrl = "https://www.notion.so/",