right-to-left extension

CHANGELOG.md

@@ -22,11 +22,11 @@ complete rewrite with node.js.
 - theme: "gameish" = a purple, "gamer-styled" theme with a blocky-font.
 - theme: "pastel dark" = a true dark theme with a hint of pastel.
 - extension: "emojiset" = pick from a variety of emoji styles to use.
+- extension: "night shift" = sync dark/light theme with the system (overrides normal theme setting).
+- extension: "right-to-left" = enables auto rtl/ltr text direction detection. (ported from [github.com/obahareth/notion-rtl](https://github.com/obahareth/notion-rtl).)
 
 //todo
 
-- extension: "night light" = sync dark/light theme with the system (overrides normal theme setting).
-- extension: "right-to-left" = enables auto rtl/ltr text direction detection. (ported from [github.com/obahareth/notion-rtl](https://github.com/obahareth/notion-rtl).)
 - extension: "weekly view" = view 7-day calendars. (ported from [github.com/adihd/notionweeklyview](https://github.com/adihd/notionweeklyview).)
 - extension: "property layout" = auto-collapse page properties that usually push down page content. (ported from [github.com/alexander-kazakov/notion-layout-extension](https://github.com/alexander-kazakov/notion-layout-extension).)
 

mods/right-to-left/mod.js

@@ -0,0 +1,40 @@
+/*
+ * right-to-left
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Omar Bahareth
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'b28ee2b9-4d34-4e36-be8a-ab5be3d79f51',
+  tags: ['extension'],
+  name: 'right-to-left',
+  desc: 'enables auto rtl/ltr text direction detection.',
+  version: '1.3.0',
+  author: 'obahareth',
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        const observer = new MutationObserver((list, observer) => {
+          document
+            .querySelectorAll(
+              '.notion-page-content > div[data-block-id]:not([dir])'
+            )
+            .forEach((block) => block.setAttribute('dir', 'auto'));
+          document
+            .querySelectorAll("div[placeholder='List']")
+            .forEach((item) => {
+              item.style['text-align'] = 'start';
+            });
+        });
+        observer.observe(document, {
+          childList: true,
+          subtree: true,
+        });
+      });
+    },
+  },
+};