Merge pull request #1 from dragonwocky/dev

Update

CHANGELOG.md

@@ -17,6 +17,8 @@ a flexibility update.
 - new: in-page columns disabled/wrapped and wider pages when the window is narrower than 600px
   for improved responsiveness.
 - new: relaunch button in tray menu.
+- new: a core mod option for a default page id/url (all new windows will load it instead of the
+  normal "most recent" page).
 - improved: a core mod option to make transitions snappy/0s.
 - improved: menu will now respect integrated titlebar setting.
 - improved: use keyup listeners instead of a globalShortcut for the enhancements menu toggle.
@@ -32,6 +34,7 @@ a flexibility update.
 - bugfix: remove focus mode footer from neutral theme.
 - bugfix: improvements to the colour theming, particularly to make real- and fake-light/dark
   modes (as applied by the night shift extension) look consistent.
+- bugfix: font sizing applied to overlays/previews.
 - tweak: sticky table/list rows.
 - theme: "material ocean" = an oceanic colour palette.
 - theme: "dracula" = a theme based on the popular dracula color palette

mods/core/buttons.js

@@ -15,7 +15,7 @@ module.exports = (store) => {
     buttons = {
       element: helpers.createElement('<div class="window-buttons-area"></div>'),
       insert: [
-        ...((store('mods', {})['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
+        ...((store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
           .enabled
           ? ['alwaysontop']
           : []),

mods/core/client.js

@@ -19,12 +19,16 @@ module.exports = (store, __exports) => {
   // additional hotkeys
   document.defaultView.addEventListener('keyup', (event) => {
     if (event.code === 'F5') location.reload();
+    if (
+      !(store('mods')['e1692c29-475e-437b-b7ff-3eee872e1a42'] || {}).enabled
+    ) {
       // open menu on hotkey toggle
       const hotkey = toKeyEvent(store().menu_toggle);
       let triggered = true;
       for (let prop in hotkey)
         if (hotkey[prop] !== event[prop]) triggered = false;
       if (triggered) electron.ipcRenderer.send('enhancer:open-menu');
+    }
   });
 
   const attempt_interval = setInterval(enhance, 500);
@@ -43,7 +47,11 @@ module.exports = (store, __exports) => {
       document.body.classList.add('snappy-transitions');
 
     // frameless
-    if (store().frameless && !store().tiling_mode && !store().tabs) {
+    if (
+      store().frameless &&
+      !store().tiling_mode &&
+      !(store('mods')['e1692c29-475e-437b-b7ff-3eee872e1a42'] || {}).enabled
+    ) {
       document.body.classList.add('frameless');
       // draggable area
       document
@@ -56,7 +64,9 @@ module.exports = (store, __exports) => {
     }
 
     // window buttons
-    if (!store().tabs) {
+    if (
+      !(store('mods')['e1692c29-475e-437b-b7ff-3eee872e1a42'] || {}).enabled
+    ) {
       const buttons = require('./buttons.js')(store);
       document
         .querySelector('.notion-topbar > div[style*="display: flex"]')
@@ -153,7 +163,9 @@ module.exports = (store, __exports) => {
           '--theme--code_inline-background',
         ].map((rule) => [rule, getStyle(rule)])
       );
-      if (store().tabs) {
+      if (
+        (store('mods')['e1692c29-475e-437b-b7ff-3eee872e1a42'] || {}).enabled
+      ) {
         electron.ipcRenderer.sendToHost(
           'enhancer:set-tab-theme',
           [
@@ -179,7 +191,7 @@ module.exports = (store, __exports) => {
     );
     electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars);
 
-    if (store().tabs) {
+    if ((store('mods')['e1692c29-475e-437b-b7ff-3eee872e1a42'] || {}).enabled) {
       let tab_title = '';
       __electronApi.setWindowTitle = (title) => {
         if (tab_title !== title) {

mods/core/css/theme.css

@@ -152,7 +152,8 @@
 [style*='SFMono-Regular'] {
   font-family: var(--theme--font_code) !important;
 }
-.notion-frame .notion-page-block div[placeholder='Untitled'] {
+.notion-frame .notion-page-block div[placeholder='Untitled'],
+.notion-overlay-container .notion-page-block div[placeholder='Untitled']{
   font-size: calc(
     var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em)
   ) !important;
@@ -172,15 +173,16 @@
     var(--theme--font_body-size) * (var(--theme--font_heading3-size) / 1em)
   ) !important;
 }
-.notion-frame .notion-scroller.vertical.horizontal [style*='font-size: 14px'] {
+.notion-frame .notion-scroller.vertical.horizontal [style*='font-size: 14px'],
+.notion-overlay-container .notion-scroller.vertical [style*='font-size: 14px']{
   font-size: var(--theme--font_label-size) !important;
 }
-.notion-frame .notion-scroller.vertical.horizontal .notion-page-content {
+.notion-frame .notion-scroller.vertical.horizontal .notion-page-content,
+.notion-overlay-container .notion-scroller.vertical .notion-page-content {
   font-size: var(--theme--font_body-size) !important;
 }
-.notion-frame
+.notion-frame .notion-scroller.vertical.horizontal .notion-page-content[style*='font-size: 14px'],
-  .notion-scroller.vertical.horizontal
+.notion-overlay-container .notion-scroller.vertical .notion-page-content[style*='font-size: 14px'] {
-  .notion-page-content[style*='font-size: 14px'] {
   font-size: var(--theme--font_body-size_small) !important;
 }
 .notion-code-block [placeholder=' '] {

mods/core/menu.js

@@ -14,47 +14,43 @@ const store = require('../../pkg/store.js'),
   { toKeyEvent } = require('keyboardevent-from-electron-accelerator');
 
 window['__start'] = async () => {
+  // mod loader
+  const modules = helpers.getEnhancements();
+  if (modules.loaded.length)
+    console.info(
+      `<notion-enhancer> enhancements loaded: ${modules.loaded
+        .map((mod) => mod.name)
+        .join(', ')}.`
+    );
+  if (modules.invalid.length) {
+    createAlert(
+      'error',
+      `invalid mods found: ${modules.invalid
+        .map((mod) => `<b>${mod}</b>`)
+        .join(', ')}.`
+    ).append();
+  }
+  const coreStore = (...args) => {
+    const mod = modules.loaded.find(
+      (m) => m.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082'
+    );
+    return !args.length
+      ? store(mod.id, mod.defaults)
+      : args.length === 1 && typeof args[0] === 'object'
+      ? store(mod.id, { ...mod.defaults, ...args[0] })
+      : store(args[0], { ...mod.defaults, ...args[1] });
+  };
+
   const buttons = require('./buttons.js')(() => ({
     '72886371-dada-49a7-9afc-9f275ecf29d3': {
       enabled: (store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
         .enabled,
     },
-    tiling_mode: store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082').tiling_mode,
+    tiling_mode: coreStore().tiling_mode,
-    frameless: store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082').frameless,
+    frameless: coreStore().frameless,
   }));
   document.querySelector('#titlebar').appendChild(buttons.element);
 
-  document.defaultView.addEventListener('keyup', (event) => {
-    if (event.code === 'F5') location.reload();
-    const meta =
-      !(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey;
-    if (
-      meta &&
-      document.activeElement.parentElement.id === 'tags' &&
-      event.key === 'Enter'
-    )
-      document.activeElement.click();
-    if (document.activeElement.tagName.toLowerCase() === 'input') {
-      if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
-        document.activeElement.checked = !document.activeElement.checked;
-      if (
-        ['Escape', 'Enter'].includes(event.key) &&
-        document.activeElement.type !== 'checkbox' &&
-        (document.activeElement.parentElement.id !== 'search' ||
-          event.key === 'Escape')
-      )
-        document.activeElement.blur();
-    } else if (meta && event.key === '/')
-      document.querySelector('#search > input').focus();
-    if (
-      (event.ctrlKey || event.metaKey) &&
-      event.key === 'f' &&
-      !event.altKey &&
-      !event.shiftKey
-    )
-      document.querySelector('#search > input').focus();
-  });
-
   electron.ipcRenderer.send('enhancer:get-menu-theme');
   electron.ipcRenderer.on('enhancer:set-menu-theme', (event, theme) => {
     for (const style of theme)
@@ -120,26 +116,10 @@ window['__start'] = async () => {
       ).prepend();
     });
 
-  // mod loader
-  const modules = helpers.getEnhancements();
-  if (modules.loaded.length)
-    console.info(
-      `<notion-enhancer> enhancements loaded: ${modules.loaded
-        .map((mod) => mod.name)
-        .join(', ')}.`
-    );
-  if (modules.invalid.length) {
-    createAlert(
-      'error',
-      `invalid mods found: ${modules.invalid
-        .map((mod) => `<b>${mod}</b>`)
-        .join(', ')}.`
-    ).append();
-  }
-
-  // further-configuration popup
   const $popup = document.querySelector('#popup');
   document.addEventListener('keyup', (event) => {
+    if (event.code === 'F5') location.reload();
+    // further-configuration popup
     if (
       $popup.classList.contains('visible') &&
       ['Enter', 'Escape'].includes(event.key)
@@ -147,18 +127,41 @@ window['__start'] = async () => {
       $popup.classList.remove('visible');
     // close window on hotkey toggle
     console.log();
-    const hotkey = toKeyEvent(
+    const hotkey = toKeyEvent(coreStore().menu_toggle);
-      store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082', {
-        menu_toggle: modules.loaded
-          .find((m) => m.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082')
-          .options.find((o) => o.key === 'menu_toggle').value,
-      }).menu_toggle
-    );
     let triggered = true;
     for (let prop in hotkey)
       if (hotkey[prop] !== event[prop]) triggered = false;
     if (triggered) electron.remote.getCurrentWindow().close();
+    //  focus search
+    const meta =
+      !(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey;
+    if (
+      meta &&
+      document.activeElement.parentElement.id === 'tags' &&
+      event.key === 'Enter'
+    )
+      document.activeElement.click();
+    if (document.activeElement.tagName.toLowerCase() === 'input') {
+      if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
+        document.activeElement.checked = !document.activeElement.checked;
+      if (
+        ['Escape', 'Enter'].includes(event.key) &&
+        document.activeElement.type !== 'checkbox' &&
+        (document.activeElement.parentElement.id !== 'search' ||
+          event.key === 'Escape')
+      )
+        document.activeElement.blur();
+    } else if (meta && event.key === '/')
+      document.querySelector('#search > input').focus();
+    if (
+      (event.ctrlKey || event.metaKey) &&
+      event.key === 'f' &&
+      !event.altKey &&
+      !event.shiftKey
+    )
+      document.querySelector('#search > input').focus();
   });
+
   let colorpicker_target = null;
   const $colorpicker = colorjoe
     .rgb('colorpicker')
@@ -171,7 +174,6 @@ window['__start'] = async () => {
       store(colorpicker_target.id)[colorpicker_target.key] = color.css();
     })
     .update();
-
   document
     .querySelector('#colorpicker')
     .appendChild(
@@ -424,11 +426,13 @@ window['__start'] = async () => {
             };
     mod.elem = helpers.createElement(`
     <section class="${
-      mod.tags.includes('core') || enabled ? 'enabled' : 'disabled'
+      mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082' || enabled
+        ? 'enabled'
+        : 'disabled'
     }" id="${mod.id}">
         <div class="meta">
         <h3 ${
-          mod.tags.includes('core')
+          mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082'
             ? `>${mod.name}`
             : `class="toggle">
               <input type="checkbox" id="enable_${mod.id}"

mods/core/mod.js

@@ -14,12 +14,6 @@ module.exports = {
   version: require('../../package.json').version,
   author: 'dragonwocky',
   options: [
-    {
-      key: 'tabs',
-      label: 'tabbable windows',
-      type: 'toggle',
-      value: false,
-    },
     {
       key: 'openhidden',
       label: 'hide app on open',
@@ -80,6 +74,12 @@ module.exports = {
       type: 'input',
       value: 'Alt+E',
     },
+    {
+      key: 'default_page',
+      label: 'open to default page id/url:',
+      type: 'input',
+      value: '',
+    },
   ],
   hacks: {
     'main/main.js': require('./tray.js'),

mods/core/render.js

@@ -9,7 +9,6 @@
 const url = require('url'),
   path = require('path'),
   electron = require('electron'),
-  browserWindow = electron.remote.getCurrentWindow(),
   { __notion } = require('../../pkg/helpers.js'),
   config = require(`${__notion}/app/config.js`),
   constants = require(`${__notion}/app/shared/constants.js`),
@@ -19,17 +18,22 @@ const url = require('url'),
   koMessages = require(`${__notion}/app/i18n/ko_KR/messages.json`),
   schemeHelpers = require(`${__notion}/app/shared/schemeHelpers.js`),
   React = require(`${__notion}/app/node_modules/react/index.js`),
-  ReactDOM = require(`${__notion}/app/node_modules/react-dom/index.js`);
+  ReactDOM = require(`${__notion}/app/node_modules/react-dom/index.js`),
+  { toKeyEvent } = require('keyboardevent-from-electron-accelerator');
 
 const insertCSP = `
   const csp = document.createElement('meta');
   csp.httpEquiv = 'Content-Security-Policy';
   csp.content = "script-src 'self' 'unsafe-inline' 'unsafe-eval' enhancement: https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://checkout.stripe.com https://embed.typeform.com https://admin.typeform.com https://platform.twitter.com https://cdn.syndication.twimg.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://checkout.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: enhancement: https: http:; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com; style-src 'self' 'unsafe-inline' enhancement: https: http:; frame-src https: http:; media-src https: http:";
   document.head.appendChild(csp);
-`;
+`,
+  idToNotionURL = (id) =>
+    `notion://www.notion.so/${
+      url.parse(id).pathname.split('/').reverse()[0] || ''
+    }/${url.parse(id).search || ''}`;
 
 module.exports = (store, __exports) => {
-  if (store().tabs) {
+  if ((store('mods')['e1692c29-475e-437b-b7ff-3eee872e1a42'] || {}).enabled) {
     class Index extends React.PureComponent {
       constructor() {
         super(...arguments);
@@ -157,22 +161,39 @@ module.exports = (store, __exports) => {
         const list = new Map(this.state.tabs);
         while (this.state.tabs.get(id)) id++;
         list.delete(id);
-        if (this.views.html[id]) {
+        this.openTab(id, list, true);
+      }
+      openTab(id, state = new Map(this.state.tabs), load) {
+        if (!id && id !== 0) return;
+        this.views.current.id = id;
+        this.setState({ tabs: state.set(id, true) }, async () => {
+          this.focusTab();
+          if (load) {
+            await new Promise((res, rej) => {
+              let attempt;
+              attempt = setInterval(() => {
+                if (!document.body.contains(this.views.html[id])) return;
+                clearInterval(attempt);
+                res();
+              }, 50);
+            });
             this.views.html[id].style.opacity = '0';
             let unhide;
             unhide = () => {
               this.views.html[id].style.opacity = '';
-            this.views.html[id].removeEventListener('did-stop-loading', unhide);
+              this.views.html[id].removeEventListener(
+                'did-stop-loading',
+                unhide
+              );
             };
             this.views.html[id].addEventListener('did-stop-loading', unhide);
-          this.views.html[id].loadURL(this.views.current.$el().src);
+            this.views.html[id].loadURL(
+              store().default_page
+                ? idToNotionURL(store().default_page)
+                : this.views.current.$el().src
+            );
           }
-        this.openTab(id, list);
+        });
-      }
-      openTab(id, state = new Map(this.state.tabs)) {
-        if (!id && id !== 0) return;
-        this.views.current.id = id;
-        this.setState({ tabs: state.set(id, true) }, this.focusTab.bind(this));
       }
       closeTab(id) {
         if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
@@ -219,11 +240,12 @@ module.exports = (store, __exports) => {
         ) {
           this.views.tabs[event.target.id].children[0].innerText =
             event.args[0];
+          const electronWindow = electron.remote.getCurrentWindow();
           if (
             event.target.id == this.views.current.id &&
-            browserWindow.getTitle() !== event.args[0]
+            electronWindow.getTitle() !== event.args[0]
           )
-            browserWindow.setTitle(event.args[0]);
+            electronWindow.setTitle(event.args[0]);
         }
       }
       startSearch(isPeekView) {
@@ -426,25 +448,41 @@ module.exports = (store, __exports) => {
                 this.setState({ zoomFactor });
               }
             );
+            let electronWindow;
+            try {
+              electronWindow = electron.remote.getCurrentWindow();
+            } catch (error) {
+              notionIpc.sendToMain('notion:log-error', {
+                level: 'error',
+                from: 'index',
+                type: 'GetCurrentWindowError',
+                error: error.message,
+              });
+            }
+            if (!electronWindow) {
+              this.setState({ error: true });
+              this.handleReload();
+              return;
+            }
             const sendFullScreenChangeEvent = () => {
               notionIpc.sendIndexToNotion(
                 $notion,
                 'notion:full-screen-changed'
               );
             };
-            browserWindow.addListener(
+            electronWindow.addListener(
               'enter-full-screen',
               sendFullScreenChangeEvent
             );
-            browserWindow.addListener(
+            electronWindow.addListener(
               'leave-full-screen',
               sendFullScreenChangeEvent
             );
-            browserWindow.addListener(
+            electronWindow.addListener(
               'enter-html-full-screen',
               sendFullScreenChangeEvent
             );
-            browserWindow.addListener(
+            electronWindow.addListener(
               'leave-html-full-screen',
               sendFullScreenChangeEvent
             );
@@ -717,13 +755,24 @@ module.exports = (store, __exports) => {
     window['__start'] = () => {
       document.head.innerHTML += `<link rel="stylesheet" href="${__dirname}/css/tabs.css" />`;
 
+      // open menu on hotkey toggle
+      document.addEventListener('keyup', (event) => {
+        const hotkey = toKeyEvent(store().menu_toggle);
+        let triggered = true;
+        for (let prop in hotkey)
+          if (hotkey[prop] !== event[prop]) triggered = false;
+        if (triggered) electron.ipcRenderer.send('enhancer:open-menu');
+      });
+
       const parsed = url.parse(window.location.href, true),
         notionUrl =
           parsed.query.path ||
-          schemeHelpers.getSchemeUrl({
+          (store().default_page
+            ? idToNotionURL(store().default_page)
+            : schemeHelpers.getSchemeUrl({
                 httpUrl: config.default.baseURL,
                 protocol: config.default.protocol,
-          });
+              }));
       delete parsed.search;
       delete parsed.query;
       const plainUrl = url.format(parsed);
@@ -753,6 +802,31 @@ module.exports = (store, __exports) => {
     const __start = window['__start'];
     window['__start'] = () => {
       __start();
+
+      if (store().default_page) {
+        new Promise((res, rej) => {
+          let attempt;
+          attempt = setInterval(() => {
+            if (
+              !document.getElementById('notion') ||
+              !document.getElementById('notion').loadURL
+            )
+              return;
+            clearInterval(attempt);
+            res();
+          }, 50);
+        }).then(() => {
+          if (
+            document.getElementById('notion').getAttribute('src') ===
+            'notion://www.notion.so'
+          ) {
+            document
+              .getElementById('notion')
+              .loadURL(idToNotionURL(store().default_page));
+          }
+        });
+      }
+
       const dragarea = document.querySelector(
           '#root [style*="-webkit-app-region: drag"]'
         ),

mods/tabs/mod.js

@@ -0,0 +1,19 @@
+/*
+ * tabs
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+// this is just a pseudo mod to "separate" the options
+// from the core module - the core still handles actually
+// making it work.
+module.exports = {
+  id: 'e1692c29-475e-437b-b7ff-3eee872e1a42',
+  tags: ['core', 'extension'],
+  name: 'tabs',
+  desc: 'have multiple notion pages open in a single window.',
+  version: '0.1.0',
+  author: 'dragonwocky',
+};

pkg/helpers.js

@@ -130,6 +130,11 @@ function getEnhancements() {
           ))
       )
         throw Error;
+      mod.defaults = {};
+      for (let opt of mod.options || [])
+        mod.defaults[opt.key] = Array.isArray(opt.value)
+          ? opt.value[0]
+          : opt.value;
       modules.IDs.push(mod.id);
       modules.loaded.push({
         ...mod,

pkg/loader.js

@@ -60,7 +60,7 @@ module.exports = function (__file, __exports) {
     ...modules.loaded.filter((m) => !m.tags.includes('core')).reverse(),
   ]) {
     if (
-      (mod.tags || []).includes('core') ||
+      mod.id === '0f0bf8b6-eae6-4273-b307-8fc43f2ee082' ||
       store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled
     ) {
       if (
@@ -84,20 +84,16 @@ module.exports = function (__file, __exports) {
         });
       }
       if (mod.hacks && mod.hacks[__file]) {
-        mod.defaults = {};
+        mod.hacks[__file]((...args) => {
-        for (let opt of mod.options || [])
+          if (!args.length) return store(mod.id, mod.defaults);
-          mod.defaults[opt.key] = Array.isArray(opt.value)
+          if (args.length === 1 && typeof args[0] === 'object')
-            ? opt.value[0]
+            return store(mod.id, { ...mod.defaults, ...args[0] });
-            : opt.value;
+          const other_mod = modules.loaded.find((m) => m.id === args[0]);
-        mod.hacks[__file](
+          return store(args[0], {
-          (...args) =>
+            ...(other_mod ? other_mod.defaults : {}),
-            !args.length
+            ...args[1],
-              ? store(mod.id, mod.defaults)
+          });
-              : args.length === 1 && typeof args[0] === 'object'
+        }, __exports);
-              ? store(mod.id, { ...mod.defaults, ...args[0] })
-              : store(args[0], { ...mod.defaults, ...args[1] }),
-          __exports
-        );
       }
     }
   }