From bb3439429fe2e4c5e7f3cd3e27b2857437e7ae4e Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Thu, 17 Sep 2020 14:37:04 +1000
Subject: [PATCH] properly align rtl bullet points/checkboxes #55

though more performant, this also limits rtl to page content
---
 repo/core/css/theme.css   |  6 +++++
 repo/right-to-left/mod.js | 52 ++++++++++++++++++++++++++++-----------
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css
index 0b81eeb..8eb13b8 100644
--- a/repo/core/css/theme.css
+++ b/repo/core/css/theme.css
@@ -45,6 +45,12 @@
   [style*='pointer-events:'][style*='max-width: 100%; width: 100%'] {
   width: var(--theme--page_full-width) !important;
 }
+.notion-frame .notion-scroller [style*='padding-left: 136.5px;'] {
+  padding-left: 0 !important;
+}
+.notion-frame .notion-scroller [style*='padding-right: 136.5px;'] {
+  padding-right: 0 !important;
+}
 
 .notion-peek-renderer
   .notion-scroller.vertical
diff --git a/repo/right-to-left/mod.js b/repo/right-to-left/mod.js
index 21205fa..ccab48d 100644
--- a/repo/right-to-left/mod.js
+++ b/repo/right-to-left/mod.js
@@ -12,33 +12,55 @@ module.exports = {
   tags: ['extension'],
   name: 'right-to-left',
   desc: 'enables auto rtl/ltr text direction detection.',
-  version: '1.3.0',
+  version: '1.4.0',
   author: 'obahareth',
   hacks: {
     'renderer/preload.js'(store, __exports) {
+      function alignPageContentToRight() {
+        document
+          .querySelectorAll(
+            '.notion-page-content > div[data-block-id]:not([dir])'
+          )
+          .forEach((block) => block.setAttribute('dir', 'auto'));
+        document
+          .querySelectorAll("div[placeholder='List'], div[placeholder='To-do']")
+          .forEach((item) => {
+            item.style['text-align'] = '-webkit-auto';
+          });
+      }
+
       document.addEventListener('readystatechange', (event) => {
         if (document.readyState !== 'complete') return false;
         let queue = [];
-        const observer = new MutationObserver((list, observer) => {
-          if (!queue.length) requestAnimationFrame(() => process(queue));
-          queue.push(...list);
-        });
-        observer.observe(document.body, {
+        const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => {
+            if (!queue.length) requestIdleCallback(() => process(queue));
+            queue.push(...list);
+          }),
+          PAGE_OBSERVER = new MutationObserver(alignPageContentToRight);
+        DOCUMENT_OBSERVER.observe(document.body, {
           childList: true,
           subtree: true,
-          characterData: true,
         });
         function process(list) {
           queue = [];
-          for (let { target } of list) {
-            if (!target.innerText) continue;
-            if (target.getAttribute('dir') !== 'auto')
-              target.setAttribute('dir', 'auto');
+          for (let { addedNodes } of list) {
             if (
-              getComputedStyle(target).getPropertyValue('text-align') !==
-              'start'
-            )
-              target.style.setProperty('text-align', 'start');
+              addedNodes[0] &&
+              addedNodes[0].className === 'notion-page-content'
+            ) {
+              alignPageContentToRight();
+
+              const $page = document.getElementsByClassName(
+                'notion-page-content'
+              )[0];
+              if ($page) {
+                PAGE_OBSERVER.disconnect();
+                PAGE_OBSERVER.observe($page, {
+                  childList: true,
+                  subtree: false,
+                });
+              }
+            }
           }
         }
       });