Merge remote-tracking branch 'ori/master' into master

CHANGELOG.md

@@ -6,6 +6,18 @@
 - [improved responsiveness](https://chrome.google.com/webstore/detail/notion%20%20-responsiveness-f/leadcilhbmibbkgbnjgmmnfgnnhmeddk)
 - [highlight/mark viewer](https://chrome.google.com/webstore/detail/notion%2B-mark-manager/hipgmnlpnimedfepbfbfiaobohhffcfc)
 - [advanced math editor](https://github.com/Manueloccorso/NotionMathEditor_BrowserExtension)
+- re-orderable extensions
+
+### v0.9.1 (2020-09-26)
+
+- bugfix: font chooser will continue iterating through fonts after encountering a blank option.
+- bugfix: block indents are no longer overriden.
+- bugfix: neutral does not force full width pages.
+- bugfix: bypass preview extension works with the back/forward arrows.
+- bugfix: check all views on a page for a weekly calendar.
+- bugfix: emoji sets no longer modifies the user agent = doesn't break hotkeys.
+
+> 📥 `npm i -g notion-enhancer@0.9.1`
 
 ### v0.9.0 (2020-09-20)
 

CONTRIBUTING.md

@@ -30,6 +30,7 @@ download:
 ```sh
 git clone https://github.com/dragonwocky/notion-enhancer
 cd notion-enhancer
+git checkout dev
 npm link
 ```
 
@@ -52,6 +53,12 @@ to keep a consistent informative code style it is preferred to name variables wi
 `snake_case`, functions/methods with `camelCase`, and classes with `PascalCase`.
 if a variable is a reference to a DOM element, it may be helpful to prefix it with a `$`.
 
+some variables beginning with a double underscore are `__folder` paths and `ALL_CAPS` variables
+are constant. this is not required, but these styles should not be used for any other purpose.
+
+the master branch is kept consistent with the current release,
+so all changes should be made to the dev branch.
+
 ## review
 
 active core devs will manually look through each pull request and communicate with contributors before merging to

mods/bypass-preview/mod.js

@@ -19,23 +19,48 @@ module.exports = {
         if (document.readyState !== 'complete') return false;
         const attempt_interval = setInterval(enhance, 500);
         function enhance() {
-          const notion_elem = document.querySelector(
+          const notion_elem = document.querySelector('.notion-app-inner');
-            '.notion-default-overlay-container'
-          );
           if (!notion_elem) return;
           clearInterval(attempt_interval);
-
+          const observer = new MutationObserver(handle);
-          process();
-          const observer = new MutationObserver(process);
           observer.observe(notion_elem, {
             childList: true,
             subtree: true,
           });
-          function process(list, observer) {
+
-            let preview = document.querySelector(
+          let pageHistory = [];
-              '.notion-peek-renderer [style*="height: 45px;"] a'
+          handle();
-            );
+          function handle(list, observer) {
-            if (preview) preview.click();
+            const pageID = (location.search
+                .slice(1)
+                .split('&')
+                .map((opt) => opt.split('='))
+                .find((opt) => opt[0] === 'p') || [
+                '',
+                ...location.pathname.split(/(-|\/)/g).reverse(),
+              ])[1],
+              preview = document.querySelector(
+                '.notion-peek-renderer [style*="height: 45px;"] a'
+              );
+            if (
+              pageID &&
+              (!pageHistory[0] ||
+                pageHistory[0][0] !== pageID ||
+                pageHistory[0][1] !== !!preview)
+            ) {
+              if (preview) {
+                if (
+                  pageHistory[1] &&
+                  pageHistory[0][0] === pageID &&
+                  pageHistory[1][0] === pageID &&
+                  pageHistory[1][1]
+                ) {
+                  document.querySelector('.notion-history-back-button').click();
+                } else preview.click();
+              }
+              // most recent is at start for easier access
+              pageHistory.unshift([pageID, !!preview]);
+            }
           }
         }
       });

mods/bypass-preview/styles.css

@@ -0,0 +1,9 @@
+/*
+ * bypass preview
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+.notion-peek-renderer {
+  opacity: 0;
+}

mods/calendar-scroll/mod.js

@@ -55,13 +55,13 @@ module.exports = {
             );
           });
 
-          process();
+          handle();
-          const observer = new MutationObserver(process);
+          const observer = new MutationObserver(handle);
           observer.observe(notion_elem, {
             childList: true,
             subtree: true,
           });
-          function process(list, observer) {
+          function handle(list, observer) {
             if (document.querySelector('#calendar-scroll-to-week')) return;
             const arrow = document.querySelector(
               '.notion-selectable.notion-collection_view_page-block .chevronLeft'

mods/core/css/theme.css

@@ -52,7 +52,6 @@
   [style*='pointer-events:'][style*='max-width: 100%; width: 100%'] {
   width: var(--theme--page_full-width) !important;
 }
-.notion-text-block [style*='padding-left: 1.5em'],
 .notion-frame .notion-scroller [style*='padding-left: 136.5px;'] {
   padding-left: 0 !important;
 }

mods/emoji-sets/mod.js

@@ -11,7 +11,7 @@ module.exports = {
   tags: ['extension'],
   name: 'emoji sets',
   desc: 'pick from a variety of emoji styles to use.',
-  version: '0.2.0',
+  version: '0.3.0',
   author: 'dragonwocky',
   options: [
     {
@@ -38,58 +38,109 @@ module.exports = {
   ],
   hacks: {
     'renderer/preload.js'(store, __exports) {
-      const useNative =
+      let tweaked = false;
-        (store().style === 'microsoft' && process.platform === 'win32') ||
-        (store().style === 'apple' && process.platform === 'darwin');
 
-      Object.defineProperty(navigator, 'userAgent', {
+      document.addEventListener('readystatechange', (event) => {
-        get: function () {
+        if (document.readyState !== 'complete') return false;
-          // macOS useragent uses system emojis instead of images
+        let queue = [];
-          // = no need to download
+        const observer = new MutationObserver((list, observer) => {
-          return useNative
+          if (!queue.length) requestAnimationFrame(handle);
-            ? 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15 Notion/2.0.9 Electron/6.1.5'
+          queue.push(...list);
-            : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Notion/2.0.9 Chrome/76.0.3809.146 Electron/6.1.5 Safari/537.36';
+        });
-        },
+        observer.observe(document.body, {
-      });
+          childList: true,
-
+          subtree: true,
-      if (!useNative) {
+          characterData: true,
-        let tweaked = false;
+        });
-
+        function handle() {
-        document.addEventListener('readystatechange', (event) => {
+          queue = [];
-          if (document.readyState !== 'complete') return false;
+          const isMac = process.platform === 'darwin',
-          let queue = [];
+            native =
-          const observer = new MutationObserver((list, observer) => {
+              (store().style === 'microsoft' && process.platform === 'win32') ||
-            if (!queue.length) requestAnimationFrame(process);
+              (store().style === 'apple' && isMac);
-            queue.push(...list);
+          if (store().style !== (isMac ? 'apple' : 'twitter') || tweaked) {
-          });
+            if (isMac) {
-          observer.observe(document.body, {
+              if (native) {
-            childList: true,
+                document
-            subtree: true,
+                  .querySelectorAll('span[role="image"][aria-label]')
-            characterData: true,
+                  .forEach((el) => {
-          });
+                    el.style.background = '';
-          function process() {
+                    el.style.color = 'currentColor';
-            queue = [];
+                  });
-            if (store().style !== 'twitter' || tweaked) {
+              } else {
+                document
+                  .querySelectorAll('span[role="image"][aria-label]')
+                  .forEach((el) => {
+                    if (!el.style.background.includes(store().style)) {
+                      el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
+                        'aria-label'
+                      )}?style=${store().style})`;
+                      el.style.width = el.parentElement.style.fontSize;
+                      el.style.backgroundSize = 'contain';
+                      el.style.backgroundRepeat = 'no-repeat';
+                      el.style.color = 'transparent';
+                    }
+                  });
+              }
+            } else {
               document
                 .querySelectorAll(
                   '[src*="notion-emojis.s3"]:not(.notion-emoji)'
                 )
                 .forEach((el) => el.remove());
-              document.querySelectorAll('.notion-emoji').forEach((el) => {
+              if (native) {
-                el.style.setProperty(
+                document.querySelectorAll('.notion-emoji').forEach((el) => {
-                  'background',
+                  if (
-                  `url(https://emojicdn.elk.sh/${el.getAttribute(
+                    el.parentElement.querySelectorAll(
-                    'alt'
+                      'span[role="image"][aria-label]'
-                  )}?style=${store().style})`
+                    ).length !==
-                );
+                    el.parentElement.querySelectorAll('.notion-emoji').length
-                el.style.setProperty('background-size', 'contain');
+                  ) {
-                el.style.setProperty('opacity', '1');
+                    el.insertAdjacentHTML(
-              });
+                      'beforebegin',
-              tweaked = true;
+                      `<span
+                        role="image"
+                        aria-label="${el.getAttribute('alt')}"
+                        style='font-family: "Apple Color Emoji", "Segoe UI Emoji",
+                        NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol",
+                        "Android Emoji", EmojiSymbols; line-height: 1em;'
+                      >${el.getAttribute('alt')}</span>`
+                    );
+                    el.style.display = 'none';
+                    if (el.parentElement.getAttribute('contenteditable'))
+                      el.remove();
+                  }
+                });
+              } else {
+                document.querySelectorAll('.notion-emoji').forEach((el) => {
+                  el.parentElement
+                    .querySelectorAll('span[role="image"][aria-label]')
+                    .forEach((text) => text.remove());
+                  if (!el.style.background.includes(store().style)) {
+                    el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
+                      'aria-label'
+                    )}?style=${store().style})`;
+                    el.style.display = 'inline-block';
+                    el.style.backgroundSize = 'contain';
+                    el.style.backgroundRepeat = 'no-repeat';
+                    el.style.opacity = 1;
+                  }
+                });
+              }
             }
+            tweaked = true;
           }
-        });
+        }
-      }
+      });
     },
   },
 };
+// span[role="image"][aria-label]
+/*  */
+
+// <div style="position: relative; width: 36px; height: 36px;">
+//   <img class="notion-emoji" alt="😀" aria-label="😀" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="width: 36px; height: 36px; background: url(&quot;/images/twitter-emoji-spritesheet-64.png&quot;) 53.5714% 62.5% / 5700% 5700%; opacity: 1; transition: opacity 100ms ease-out 0s;">
+//   <img alt="😀" aria-label="😀" src="https://notion-emojis.s3-us-west-2.amazonaws.com/v0/svg-twitter/1f600.svg" style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 36px; height: 36px;">
+// </div>
+
+//   <img class="notion-emoji" alt="✝" aria-label="✝" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="width: 100%; height: 100%; background: url(&quot;/images/twitter-emoji-spritesheet-64.png&quot;) 98.2143% 25% / 5700% 5700%;">

mods/emoji-sets/styles.css

@@ -0,0 +1,5 @@
+.notion-emoji::after {
+  content: attr(aria-label, '');
+  width: 1em;
+  height: 1em;
+}

mods/neutral/styles.css

@@ -12,7 +12,6 @@
   --theme_dark--sidebar: #171717;
   --theme_dark--overlay: rgba(15, 15, 15, 0.6);
   --theme_dark--dragarea: #111111;
-  --theme_dark--page_normal-width: 100%;
 
   --theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
     'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,

mods/weekly-view/mod.js

@@ -30,23 +30,24 @@ module.exports = {
             subtree: true,
           });
           function process(list, observer) {
-            const collection_view = document.querySelector(
+            document
-              '.notion-collection-view-select'
+              .querySelectorAll('.notion-collection-view-select')
-            );
+              .forEach((collection_view) => {
-            if (!collection_view || collection_view.innerText != 'weekly')
+                if (collection_view.innerText != 'weekly') return;
-              return;
+                const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
-            const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
+                    'notion-calendar-view-day'
-                'notion-calendar-view-day'
+                  ),
-              ),
+                  today = [...days].find((day) => day.style.background),
-              today = [...days].find((day) => day.style.background),
+                  height = today
-              height = today
+                    ? getComputedStyle(
-                ? getComputedStyle(
+                        today.parentElement.parentElement
-                    today.parentElement.parentElement
+                      ).getPropertyValue('height')
-                  ).getPropertyValue('height')
+                    : 0;
-                : 0;
+                for (let day of days)
-            for (let day of days)
+                  day.parentElement.parentElement.style.height = 0;
-              day.parentElement.parentElement.style.height = 0;
+                if (today)
-            if (today) today.parentElement.parentElement.style.height = height;
+                  today.parentElement.parentElement.style.height = height;
+              });
           }
         }
       });

mods/word-counter/mod.js

@@ -119,6 +119,7 @@ module.exports = {
               ''
             )}`;
           $page.previousElementSibling.children[0].appendChild($container);
+          if (!$container.offsetParent) return;
           $container.offsetParent.appendChild($tooltip);
           $container
             .querySelectorAll('p')
@@ -130,7 +131,6 @@ module.exports = {
           $container.querySelectorAll('[data-tooltip]').forEach((el) => {
             el.addEventListener('mouseenter', (e) => {
               $tooltip.innerText = el.getAttribute('data-tooltip');
-              console.log(e.target);
               $tooltip.style.top = el.parentElement.offsetTop + 2.5 + 'px';
               $tooltip.style.left =
                 el.parentElement.offsetLeft +

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-enhancer",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
   "main": "index.js",
   "bin": {