extension: right-to-left

repo/indentation-lines/client.css

@@ -21,7 +21,7 @@
   position: absolute;
   height: calc(100% - 2em);
   top: 2em;
-  left: -14.48px;
+  margin-inline-start: -14.48px;
 }
 
 .notion-page-content
@@ -36,7 +36,7 @@
   position: absolute;
   height: 100%;
   top: 0;
-  left: -14.48px;
+  margin-inline-start: -14.48px;
 }
 
 /* add background to block dragger */

repo/outliner/client.mjs

@@ -12,7 +12,8 @@ export default async function ({ web, components }, db) {
 
   const $headingList = web.html`<div></div>`;
 
-  let viewFocused = false;
+  let viewFocused = false,
+    $page;
   await components.addPanelView({
     id: '87e077cc-5402-451c-ac70-27cc4ae65546',
     icon: web.html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -27,6 +28,7 @@ export default async function ({ web, components }, db) {
     $content: web.render(web.html`<div></div>`, $notice, $headingList),
     onFocus: () => {
       viewFocused = true;
+      updateHeadings();
     },
     onBlur: () => {
       viewFocused = false;
@@ -34,12 +36,9 @@ export default async function ({ web, components }, db) {
   });
   await web.whenReady();
 
-  let $page;
-  const updateHeadings = () => {
+  function updateHeadings() {
     if (!$page) return;
-      const $headerBlocks = $page.querySelectorAll(
-          '[class^="notion-"][class*="header-block"]'
-        ),
+    const $headerBlocks = $page.querySelectorAll('[class^="notion-"][class*="header-block"]'),
       $fragment = web.html`<div></div>`;
     let depth = 0,
       indent = 0;
@@ -64,8 +63,8 @@ export default async function ({ web, components }, db) {
     if ($fragment.innerHTML !== $headingList.innerHTML) {
       web.render(web.empty($headingList), ...$fragment.children);
     }
-    },
-    pageObserver = () => {
+  }
+  const pageObserver = () => {
     if (!viewFocused) return;
     if (document.contains($page)) {
       updateHeadings();

repo/registry.json

@@ -21,6 +21,7 @@
   "outliner",
   "scroll-to-top",
   "indentation-lines",
+  "right-to-left",
   "emoji-sets",
   "bypass-preview",
   "topbar-icons",

repo/right-to-left/client.css

@@ -0,0 +1,26 @@
+/*
+ * notion-enhancer: right to left
+ * (c) 2021 obahareth <omar@omar.engineer> (https://omar.engineer)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-page-content
+  .notion-table_of_contents-block
+  > div
+  > div
+  > a
+  > div
+  > div[style*='margin-left: 24px'] {
+  margin-inline-start: 24px;
+}
+
+.notion-page-content
+  .notion-table_of_contents-block
+  > div
+  > div
+  > a
+  > div
+  > div[style*='margin-left: 48px'] {
+  margin-inline-start: 48px;
+}

repo/right-to-left/client.mjs

@@ -0,0 +1,50 @@
+/*
+ * notion-enhancer: right to left
+ * (c) 2021 obahareth <omar@omar.engineer> (https://omar.engineer)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export default async function ({ web }, db) {
+  const pageContentSelector = `
+    .notion-page-content >
+      div[data-block-id]:not([dir]):not(.notion-column_list-block):not(.notion-collection_view_page-block),
+    [placeholder="Untitled"]:not([dir]),
+    .notion-column-block > div[data-block-id]:not([dir]),
+    .notion-collection_view-block:not([dir]),
+    .notion-table-view:not([dir]),
+    .notion-board-view:not([dir]),
+    .notion-gallery-view:not([dir])`,
+    listItemSelector = `
+      div[placeholder="List"]:not([style*="text-align: start"]),
+      div[placeholder="To-do"]:not([style*="text-align: start"]),
+      div[placeholder="Toggle"]:not([style*="text-align: start"])`,
+    inlineEquationSelector =
+      '.notion-text-equation-token .katex-html:not([style*="direction: rtl;"])';
+
+  const autoAlignText = () => {
+    document
+      .querySelectorAll(pageContentSelector)
+      .forEach(($block) => $block.setAttribute('dir', 'auto'));
+    document.querySelectorAll(listItemSelector).forEach(($item) => {
+      $item.style['text-align'] = 'start';
+    });
+    document.querySelectorAll(inlineEquationSelector).forEach(($equation) => {
+      $equation.style.direction = 'rtl';
+      $equation.style.display = 'inline-flex';
+      $equation.style.flexDirection = 'row-reverse';
+      for (const $symbol of $equation.children) {
+        $symbol.style.direction = 'ltr';
+      }
+    });
+  };
+  web.addDocumentObserver(autoAlignText, [
+    pageContentSelector,
+    listItemSelector,
+    inlineEquationSelector,
+  ]);
+  await web.whenReady();
+  autoAlignText();
+}

repo/right-to-left/mod.json

@@ -0,0 +1,22 @@
+{
+  "name": "right to left",
+  "id": "b28ee2b9-4d34-4e36-be8a-ab5be3d79f51",
+  "version": "1.5.0",
+  "description": "enables auto rtl/ltr text direction detection..",
+  "tags": ["extension", "automation"],
+  "authors": [
+    {
+      "name": "obahareth",
+      "email": "omar@omar.engineer",
+      "homepage": "https://omar.engineer",
+      "avatar": "https://avatars.githubusercontent.com/u/3428118"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": []
+}

repo/word-counter/client.mjs

@@ -72,7 +72,8 @@ export default async function ({ web, components }, db) {
   components.setTooltip($readingTooltip, '**~ 275 wpm**');
   components.setTooltip($speakingTooltip, '**~ 180 wpm**');
 
-  let viewFocused = false;
+  let viewFocused = false,
+    $page;
   await components.addPanelView({
     id: 'b99deb52-6955-43d2-a53b-a31540cd19a5',
     icon: await components.feather('type'),
@@ -80,14 +81,14 @@ export default async function ({ web, components }, db) {
     $content: web.render(web.html`<div></div>`, $notice, $statList),
     onFocus: () => {
       viewFocused = true;
+      updateStats();
     },
     onBlur: () => {
       viewFocused = false;
     },
   });
 
-  let $page;
-  const updateStats = () => {
+  function updateStats() {
     if (!$page) return;
     const words = $page.innerText.split(/[^\w]+/).length;
     $wordCount.innerText = words;
@@ -96,8 +97,8 @@ export default async function ({ web, components }, db) {
     $blockCount.innerText = $page.querySelectorAll('[data-block-id]').length;
     $readingTime.innerText = humanTime(words / 275);
     $speakingTime.innerText = humanTime(words / 180);
-    },
-    pageObserver = () => {
+  }
+  const pageObserver = () => {
     if (!viewFocused) return;
     if (document.contains($page)) {
       updateStats();