Merge remote-tracking branch 'upstream/dev' into dev

mods/nord/app.css

@@ -0,0 +1,8 @@
+/*
+ * nord v0.1.0
+ * (c) 2020 MANNEN
+ * dunno what to do here
+ * under the MIT license, probably?
+ */
+
+/*

mods/nord/mod.js

@@ -0,0 +1,17 @@
+/*
+ * nord v0.1.0
+ * (c) 2020 MANNEN
+ * dunno what to do here
+ * under the MIT license, probably?
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'ff87ff66-4910-436f-a843-7598edde2a7f',
+  tags: ['theme', 'dark'],
+  name: 'nord',
+  desc: 'An arctic, north-bluish color palette.',
+  version: '0.1.0',
+  author: 'MANNEN',
+};

mods/nord/variables.css

@@ -0,0 +1,186 @@
+/*
+ * nord v0.1.0
+ * (c) 2020 MANNEN
+ * dunno what to do here
+ * under the MIT license, probably?
+ */
+
+@import 'https://rsms.me/inter/inter.css';
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
+
+:root {
+  /** dark **/
+
+  --nord0: #2e3440;  /*dark1*/
+  --nord1: #3b4252;  /*dark2*/
+  --nord2: #434c5e;  /*dark3*/
+  --nord3: #4c566a;  /*dark4*/
+  --nord4: #d8dee9;  /*light1*/
+  --nord5: #e5e9f0;  /*light2*/
+  --nord6: #eceff4;  /*light3*/
+  --nord7: #8fbcbb;  /*frost1*/
+  --nord8: #88c0d0;  /*frost2*/
+  --nord9: #81a1c1;  /*frost3*/
+  --nord10: #5e81ac; /*frost4*/
+  --nord11: #bf616a; /*red*/
+  --nord12: #d08770; /*orange*/
+  --nord13: #ebcb8b; /*yellow*/
+  --nord14: #a3be8c; /*green*/
+  --nord15: #b48ead; /*purple*/
+
+  --theme_dark--main: var(--nord0);
+  --theme_dark--sidebar: var(--nord1);
+  --theme_dark--overlay: rgb(41 37 37 / 60%);
+  --theme_dark--dragarea: var(--nord0);
+  --theme_dark--box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.2) 0px 2px 4px;
+  --theme_dark--box-shadow_strong: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;
+
+  --theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
+      'Segoe UI Emoji', 'Segoe UI Symbol';
+  --theme_dark--font_code: 'Fira Code', monospace;
+
+  --theme_dark--scrollbar: var(--nord2);
+  --theme_dark--scrollbar-border: transparent;
+  --theme_dark--scrollbar_hover: var(--nord3);
+
+  --theme_dark--card: var(--nord1);
+  --theme_dark--gallery: var(--nord2);
+  --theme_dark--select_input: rgb(55, 60, 63);
+  --theme_dark--table-border: rgba(255, 255, 255, 0.1);
+  --theme_dark--ui-border: rgba(255, 255, 255, 0.07);
+  --theme_dark--interactive_hover: var(--nord3);
+  --theme_dark--interactive_hover-border: transparent;
+  --theme_dark--button_close: var(--nord11);
+  --theme_dark--button_close-fill: var(--nord6);
+
+  --theme_dark--selected: rgb(136 192 208 / 50%);
+  --theme_dark--primary: var(--nord8);
+  --theme_dark--primary_hover: var(--nord8);
+  --theme_dark--primary_click: var(--nord8);
+  --theme_dark--primary_indicator: var(--nord11);
+
+  --theme_dark--option-color: var(--nord4);
+  --theme_dark--option-background: transparent;
+  --theme_dark--option_active-color: var(--nord4);
+  --theme_dark--option_active-background: var(--theme_dark--primary);
+  --theme_dark--option_hover-color: var(--nord4);
+  --theme_dark--option_hover-background: var(--nord4);
+
+  --theme_dark--danger_text: var(--nord11);
+  --theme_dark--danger_border: rgba(235, 87, 87, 0.5);
+
+  --theme_dark--text: var(--nord4);
+  --theme_dark--text_ui: var(--nord4);
+  --theme_dark--text_ui_info: var(--nord4);
+
+  --theme_dark--text_gray: rgba(151, 154, 155, 0.95);
+  --theme_dark--text_brown: rgb(147, 114, 100);
+  --theme_dark--text_orange: var(--nord12);
+  --theme_dark--text_yellow: var(--nord13);
+  --theme_dark--text_green: var(--nord14);
+  --theme_dark--text_blue: var(--nord9);
+  --theme_dark--text_purple: var(--nord15);
+  --theme_dark--text_pink: rgb(193 106 153);
+  --theme_dark--text_red: var(--nord11);
+
+  --theme_dark--bg-text: var(--theme_dark--text);
+  --theme_dark--bg_gray: rgb(69, 75, 78);
+  --theme_dark--bg_gray-text: var(--theme_dark--bg-text);
+  --theme_dark--bg_brown: rgb(67, 64, 64);
+  --theme_dark--bg_brown-text: var(--theme_dark--bg-text);
+  --theme_dark--bg_orange: var(--nord12);
+  --theme_dark--bg_orange-text: var(--theme_light--bg-text);
+  --theme_dark--bg_yellow: var(--nord13);
+  --theme_dark--bg_yellow-text: var(--theme_light--bg-text);
+  --theme_dark--bg_green: var(--nord14);
+  --theme_dark--bg_green-text: var(--theme_dark--bg-text);
+  --theme_dark--bg_blue: var(--nord9);
+  --theme_dark--bg_blue-text: var(--theme_dark--bg-text);
+  --theme_dark--bg_purple: var(--nord15);
+  --theme_dark--bg_purple-text: var(--theme_dark--bg-text);
+  --theme_dark--bg_pink: rgb(193 106 153);
+  --theme_dark--bg_pink-text: var(--theme_dark--bg-text);
+  --theme_dark--bg_red: var(--nord11);
+  --theme_dark--bg_red-text: var(--theme_dark--bg-text);
+
+  --theme_dark--line-text: var(--theme_dark--text);
+  --theme_dark--line_gray: rgb(69, 75, 78);
+  --theme_dark--line_gray-text: var(--theme_dark--line-text);
+  --theme_dark--line_brown: rgb(67, 64, 64);
+  --theme_dark--line_brown-text: var(--theme_dark--line-text);
+  --theme_dark--line_orange: var(--nord12);
+  --theme_dark--line_orange-text: var(--theme_light--line-text);
+  --theme_dark--line_yellow: var(--nord13);
+  --theme_dark--line_yellow-text: var(--theme_light--line-text);
+  --theme_dark--line_green: var(--nord14);
+  --theme_dark--line_green-text: var(--theme_dark--line-text);
+  --theme_dark--line_blue: var(--nord9);
+  --theme_dark--line_blue-text: var(--theme_dark--line-text);
+  --theme_dark--line_purple: var(--nord15);
+  --theme_dark--line_purple-text: var(--theme_dark--line-text);
+  --theme_dark--line_pink: rgb(193 106 153);
+  --theme_dark--line_pink-text: var(--theme_dark--line-text);
+  --theme_dark--line_red: var(--nord11);
+  --theme_dark--line_red-text: var(--theme_dark--line-text);
+
+  --theme_dark--select-text: var(--theme_dark--text);
+  --theme_dark--select_gray: rgba(151, 154, 155, 0.5);
+  --theme_dark--select_gray-text: var(--theme_dark--select-text);
+  --theme_dark--select_brown: rgba(147, 114, 100, 0.5);
+  --theme_dark--select_brown-text: var(--theme_dark--select-text);
+  --theme_dark--select_orange: rgba(255, 163, 68, 0.5);
+  --theme_dark--select_orange-text: var(--theme_dark--select-text);
+  --theme_dark--select_yellow: rgba(255, 220, 73, 0.5);
+  --theme_dark--select_yellow-text: var(--theme_dark--select-text);
+  --theme_dark--select_green: rgba(77, 171, 154, 0.5);
+  --theme_dark--select_green-text: var(--theme_dark--select-text);
+  --theme_dark--select_blue: rgba(82, 156, 202, 0.5);
+  --theme_dark--select_blue-text: var(--theme_dark--select-text);
+  --theme_dark--select_purple: rgba(154, 109, 215, 0.5);
+  --theme_dark--select_purple-text: var(--theme_dark--select-text);
+  --theme_dark--select_pink: rgba(226, 85, 161, 0.5);
+  --theme_dark--select_pink-text: var(--theme_dark--select-text);
+  --theme_dark--select_red: rgba(255, 115, 105, 0.5);
+  --theme_dark--select_red-text: var(--theme_dark--select-text);
+
+  --theme_dark--callout-text: var(--theme_dark--text);
+  --theme_dark--callout_gray: rgba(69, 75, 78, 0.3);
+  --theme_dark--callout_gray-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_brown: rgba(67, 64, 64, 0.3);
+  --theme_dark--callout_brown-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_orange: rgba(89, 74, 58, 0.3);
+  --theme_dark--callout_orange-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_yellow: rgba(89, 86, 59, 0.3);
+  --theme_dark--callout_yellow-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_green: rgba(53, 76, 75, 0.3);
+  --theme_dark--callout_green-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_blue: rgba(54, 73, 84, 0.3);
+  --theme_dark--callout_blue-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_purple: rgba(68, 63, 87, 0.3);
+  --theme_dark--callout_purple-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_pink: rgba(83, 59, 76, 0.3);
+  --theme_dark--callout_pink-text: var(--theme_dark--callout-text);
+  --theme_dark--callout_red: rgba(89, 65, 65, 0.3);
+  --theme_dark--callout_red-text: var(--theme_dark--callout-text);
+
+  --theme_dark--code_inline-text: var(--nord11);
+  --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
+  --theme_dark--code-text: var(--theme_dark--text);
+  --theme_dark--code-background: var(--theme_dark--card);
+  --theme_dark--code_function: var(--theme_dark--text_blue);
+  --theme_dark--code_keyword: var(--theme_dark--text_pink);
+  --theme_dark--code_tag: var(--theme_dark--text_pink);
+  --theme_dark--code_operator: var(--theme_dark--text_yellow);
+  --theme_dark--code_important: var(--theme_dark--text_yellow);
+  --theme_dark--code_property: var(--theme_dark--text_pink);
+  --theme_dark--code_builtin: var(--theme_dark--text_yellow);
+  --theme_dark--code_attr-name: var(--theme_dark--text_yellow);
+  --theme_dark--code_comment: var(--theme_dark--text_gray);
+  --theme_dark--code_punctuation: var(--theme_dark--text_gray);
+  --theme_dark--code_doctype: var(--theme_dark--text_gray);
+  --theme_dark--code_number: var(--theme_dark--text_purple);
+  --theme_dark--code_string: var(--theme_dark--text_orange);
+  --theme_dark--code_attr-value: var(--theme_dark--text_orange);

mods/outliner/app.css

@@ -23,7 +23,7 @@
   background: var(--theme--interactive_hover);
 }
 
-.outline-header a {
+.outline-header .outline-link {
   width: 100%;
   height: 100%;
   padding: 0 14px;
@@ -36,16 +36,16 @@
   text-overflow: ellipsis;
 }
 
-.outline-header a:empty:before {
+.outline-header .outline-link:empty:before {
   color: var(--theme--text_ui_info);
   content: attr(outline-placeholder);
   display: block;
 }
 
-.outline-header[header-level="2"] a {
+.outline-header[header-level="2"] .outline-link {
   text-indent: 18px;
 }
-.outline-header[header-level="3"] a {
+.outline-header[header-level="3"] .outline-link {
   text-indent: 36px;
 }
 

mods/outliner/mod.js

@@ -14,7 +14,7 @@ module.exports = {
   tags: ['extension', 'panel'],
   name: 'outliner',
   desc: 'table of contents.',
-  version: '1.0.0',
+  version: '1.2.0',
   author: 'CloudHill',
   options: [
     {

mods/outliner/panel.js

@@ -10,6 +10,8 @@
 const { createElement } = require("../../pkg/helpers");
 
 module.exports = (store, __exports) => {
+  let lastSearch;
+
   // Observe for page changes
   const pageObserver = new MutationObserver((list, observer) => {
     for ( let { addedNodes } of list) {
@@ -30,18 +32,30 @@ module.exports = (store, __exports) => {
   // Observe for header changes
   const contentObserver = new MutationObserver((list, observer) => {
     list.forEach(m => {
+      let header;
       if (
         (
           m.type === 'childList' &&
           (
-            isHeaderElement(m.target) ||
+            m.target.hasAttribute('placeholder') ||
-            isHeaderElement(m.addedNodes[0]) ||
+            m.target.className?.includes('header-block')
-            isHeaderElement(m.removedNodes[0])
+          ) &&
+          (
+            (header = getHeaderBlock(m.target)) ||
+            (header = getHeaderBlock(m.addedNodes[0]))
           )
         ) ||
         (
           m.type === 'characterData' &&
-          isHeaderElement(m.target.parentElement)
+          (header = getHeaderBlock(m.target.parentElement))
+        )
+      ) updateOutlineHeader(header);
+
+      else if (
+        m.type === 'childList' && m.removedNodes[0] &&
+        (
+          isHeaderElement(m.removedNodes[0]) ||
+          m.removedNodes[0].querySelector?.('[class*="header-block"]')
         )
       ) findHeaders();
     })
@@ -61,6 +75,10 @@ module.exports = (store, __exports) => {
   }
 
   function findHeaders() {
+    // Add cooldown to prevent the function being run twice at the 'same' time
+    if (lastSearch >= (Date.now() - 10)) return;
+    lastSearch = Date.now();
+    
     const outline = document.querySelector('.outliner');
     if (!outline) return;
     outline.textContent = '';
@@ -69,30 +87,49 @@ module.exports = (store, __exports) => {
     const pageContent = document.querySelector('.notion-page-content');
     const headerBlocks = pageContent.querySelectorAll('[class*="header-block"]');
     
-    headerBlocks.forEach(block => {
+    headerBlocks.forEach(header => {
-      const blockId = block.dataset.blockId.replace(/-/g, '');
+      const blockId = header.dataset.blockId.replace(/-/g, '');
-      const placeholder = block.querySelector('[placeholder]').getAttribute('placeholder');
+      const headerEl = header.querySelector('[placeholder]');
-      const header = createElement(`
+      const placeholder = headerEl.getAttribute('placeholder');
+
+      const outlineHeader = createElement(`
         <div class="outline-header" header-level="${placeholder.slice(-1)}">
-          <a href="${window.location.pathname}#${blockId}"
+          <a href="${window.location.pathname}#${blockId}" class="outline-link"
-            outline-placeholder="${placeholder}">${block.innerText}</a>
+            outline-placeholder="${placeholder}"></a>
         </div>
       `);
-      outline.append(header);
+      header.outline = outlineHeader;
+      outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
+      outline.append(outlineHeader);
     })
   }
 
+  function updateOutlineHeader(header) {
+    const headerEl = header.querySelector('[placeholder]') || header;
+    if (!(
+      headerEl &&
+      header.outline &&
+      header.outline.parentElement
+    )) return findHeaders();
+    const outlineHeader = header.outline;
+    outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
+    updateOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1));
+  }
+
+  function updateOutlineLevel(outlineHeader, level) {
+    outlineHeader.setAttribute('header-level', level);
+    outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`)
+  }
+
+  function getHeaderBlock(el) {
+    return el?.closest?.('[class*="header-block"]');
+  }
+
   function isHeaderElement(el) {
     let placeholder;
     if (el) {
-      if (
+      placeholder = el.getAttribute?.('placeholder') || 
-        el.querySelector && 
+        el.querySelector?.('[placeholder]')?.getAttribute('placeholder');
-        el.querySelector('[placeholder]')
-      ) {
-        placeholder = el.querySelector('[placeholder]').getAttribute('placeholder')
-      } else if (el.getAttribute) {
-        placeholder = el.getAttribute('placeholder');
-      } 
     }
     if (!placeholder) placeholder = '';
     return placeholder.includes('Heading');
@@ -115,3 +152,6 @@ module.exports = (store, __exports) => {
     }
   }
 }
+
+
+

mods/side-panel/app.css

@@ -213,6 +213,7 @@
   overflow: hidden;
   transition: background 300ms ease;
 }
-.enhancer-panel--switcher-item:hover {
+.enhancer-panel--switcher-item:hover,
+.enhancer-panel--switcher-item:focus {
   background: var(--theme--interactive_hover);
 }

mods/side-panel/mod.js

@@ -16,7 +16,7 @@ module.exports = {
   tags: ['extension', 'panel'],
   name: 'side panel',
   desc: 'adds a side panel to notion.',
-  version: '1.0.0',
+  version: '1.1.0',
   author: 'CloudHill',
   hacks: {
     'renderer/preload.js'(store, __exports) {
@@ -224,7 +224,7 @@ module.exports = {
           function renderSwitcherItem(mod) {
             if (mod.panel) {
               const item = createElement(
-                `<div class="enhancer-panel--switcher-item">
+                `<div class="enhancer-panel--switcher-item" tabindex="0">
                   <div class="enhancer-panel--icon">${mod.panel.icon}</div>
                   <div class="enhancer-panel--title">${mod.panel.name || mod.name}</div>                
                 </div>`
@@ -235,7 +235,7 @@ module.exports = {
           }
 
           function renderSwitcher() {
-            if (panel.querySelector('.enhancer-panel--overlay-container')) return;
+            if (document.querySelector('.enhancer-panel--overlay-container')) return;
 
             // Layer to close switcher
             const overlayContainer = createElement(
@@ -265,6 +265,8 @@ module.exports = {
             overlayContainer.appendChild(div);
             div.firstElementChild.appendChild(switcher);
 
+            switcher.firstElementChild.focus();
+
             // Fade in
             switcher.animate(
               [ {opacity: 0}, {opacity: 1} ],
@@ -273,11 +275,15 @@ module.exports = {
 
             // Prevent panel from closing if unlocked
             panel.removeEventListener('mouseleave', hidePanel);
+
+            // Escape key listener
+            document.addEventListener('keydown', switcherKeyEvent);
           }
 
           function hideSwitcher() {
             const overlayContainer = document.querySelector('.enhancer-panel--overlay-container');
             overlayContainer.removeEventListener('click', hideSwitcher);
+            document.removeEventListener('keydown', switcherKeyEvent);
           
             // Fade out
             document.querySelector('.enhancer-panel--switcher').animate(
@@ -363,6 +369,35 @@ module.exports = {
             if (panel.dataset.locked === 'true') return true;
             else return false;
           }
+
+          function switcherKeyEvent(e) {
+            e.stopPropagation();
+
+            if (e.key === 'Escape') return hideSwitcher();
+            
+            const currentFocus = document.activeElement;
+            if ([' ', 'Enter'].includes(e.key)) return currentFocus.click();
+            
+            const focusNext = () => {
+              const nextEl = currentFocus.nextElementSibling;
+              if (nextEl) nextEl.focus();
+              else currentFocus.parentElement.firstElementChild.focus();
+            }
+            const focusPrevious = () => {
+              const prevEl = currentFocus.previousElementSibling;
+              if (prevEl) prevEl.focus();
+              else currentFocus.parentElement.lastElementChild.focus();
+            }
+            
+            if (e.key === 'ArrowUp') focusPrevious();
+            else if (e.key === 'ArrowDown') focusNext();
+            else if (e.key === 'Tab') {
+              if (e.shiftKey) focusPrevious();
+              else focusNext();
+
+              e.preventDefault();
+            }
+          }
         }
       });