properly align rtl bullet points/checkboxes #55

though more performant, this also limits rtl to page content

CHANGELOG.md

@@ -35,6 +35,7 @@ a feature and cleanup update.
 - bugfix: block-level text colours are now changed properly.
 - bugfix: do not require data folder during installation, to prevent `sudo` attempting to
   create it in `/var/root/`.
+- bugfix: bullet points/checkboxes will now align properly in the right-to-left extension.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
@@ -44,11 +45,6 @@ a feature and cleanup update.
 - extension: "hide help button" = hide the help button if you don't need it.
 - extension: "bypass preview" = go straight to the normal full view when opening a page.
 
-// todo
-
-- bugfix: switch to a different right-to-left extension because it wasn't working right
-  with bullet points and stuff.
-
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
 
 ### v0.8.5 (2020-08-29)

mods/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

mods/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));
+        const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => {
+            if (!queue.length) requestIdleCallback(() => process(queue));
             queue.push(...list);
-        });
-        observer.observe(document.body, {
+          }),
+          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,
+                });
+              }
+            }
           }
         }
       });