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,53 +36,50 @@ export default async function ({ web, components }, db) {
   });
   await web.whenReady();
 
-  let $page;
+  function updateHeadings() {
-  const updateHeadings = () => {
+    if (!$page) return;
-      if (!$page) return;
+    const $headerBlocks = $page.querySelectorAll('[class^="notion-"][class*="header-block"]'),
-      const $headerBlocks = $page.querySelectorAll(
+      $fragment = web.html`<div></div>`;
-          '[class^="notion-"][class*="header-block"]'
+    let depth = 0,
-        ),
+      indent = 0;
-        $fragment = web.html`<div></div>`;
+    for (const $header of $headerBlocks) {
-      let depth = 0,
+      const id = $header.dataset.blockId.replace(/-/g, ''),
-        indent = 0;
+        placeholder = $header.querySelector('[placeholder]').getAttribute('placeholder'),
-      for (const $header of $headerBlocks) {
+        headerDepth = +placeholder.at(-1);
-        const id = $header.dataset.blockId.replace(/-/g, ''),
+      if (depth && depth < headerDepth) {
-          placeholder = $header.querySelector('[placeholder]').getAttribute('placeholder'),
+        indent += 18;
-          headerDepth = +placeholder.at(-1);
+      } else if (depth > headerDepth) {
-        if (depth && depth < headerDepth) {
+        indent = Math.max(indent - 18, 0);
-          indent += 18;
+      }
-        } else if (depth > headerDepth) {
+      depth = headerDepth;
-          indent = Math.max(indent - 18, 0);
+      const $outlineHeader = web.render(
-        }
+        web.html`<a href="#${id}" class="outliner--header"
-        depth = headerDepth;
-        const $outlineHeader = web.render(
-          web.html`<a href="#${id}" class="outliner--header"
               placeholder="${web.escape(placeholder)}"
               style="--outliner--indent:${indent}px;"></a>`,
-          $header.innerText
+        $header.innerText
-        );
+      );
-        $fragment.append($outlineHeader);
+      $fragment.append($outlineHeader);
-      }
+    }
-      if ($fragment.innerHTML !== $headingList.innerHTML) {
+    if ($fragment.innerHTML !== $headingList.innerHTML) {
-        web.render(web.empty($headingList), ...$fragment.children);
+      web.render(web.empty($headingList), ...$fragment.children);
-      }
+    }
-    },
+  }
-    pageObserver = () => {
+  const pageObserver = () => {
-      if (!viewFocused) return;
+    if (!viewFocused) return;
-      if (document.contains($page)) {
+    if (document.contains($page)) {
+      updateHeadings();
+    } else {
+      $page = document.getElementsByClassName('notion-page-content')[0];
+      if ($page) {
+        $notice.innerText = pageNoticeText;
+        $headingList.style.display = '';
         updateHeadings();
       } else {
-        $page = document.getElementsByClassName('notion-page-content')[0];
+        $notice.innerText = dbNoticeText;
-        if ($page) {
+        $headingList.style.display = 'none';
-          $notice.innerText = pageNoticeText;
-          $headingList.style.display = '';
-          updateHeadings();
-        } else {
-          $notice.innerText = dbNoticeText;
-          $headingList.style.display = 'none';
-        }
       }
-    };
+    }
+  };
   web.addDocumentObserver(pageObserver, [
     '.notion-header-block',
     '.notion-sub_header-block',

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,39 +81,39 @@ 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;
+  function updateStats() {
-  const updateStats = () => {
+    if (!$page) return;
-      if (!$page) return;
+    const words = $page.innerText.split(/[^\w]+/).length;
-      const words = $page.innerText.split(/[^\w]+/).length;
+    $wordCount.innerText = words;
-      $wordCount.innerText = words;
+    $characterCount.innerText = $page.innerText.length;
-      $characterCount.innerText = $page.innerText.length;
+    $sentenceCount.innerText = $page.innerText.split('.').length;
-      $sentenceCount.innerText = $page.innerText.split('.').length;
+    $blockCount.innerText = $page.querySelectorAll('[data-block-id]').length;
-      $blockCount.innerText = $page.querySelectorAll('[data-block-id]').length;
+    $readingTime.innerText = humanTime(words / 275);
-      $readingTime.innerText = humanTime(words / 275);
+    $speakingTime.innerText = humanTime(words / 180);
-      $speakingTime.innerText = humanTime(words / 180);
+  }
-    },
+  const pageObserver = () => {
-    pageObserver = () => {
+    if (!viewFocused) return;
-      if (!viewFocused) return;
+    if (document.contains($page)) {
-      if (document.contains($page)) {
+      updateStats();
+    } else {
+      $page = document.getElementsByClassName('notion-page-content')[0];
+      if ($page) {
+        $notice.innerText = pageNoticeText;
+        $statList.style.display = '';
         updateStats();
       } else {
-        $page = document.getElementsByClassName('notion-page-content')[0];
+        $notice.innerText = dbNoticeText;
-        if ($page) {
+        $statList.style.display = 'none';
-          $notice.innerText = pageNoticeText;
-          $statList.style.display = '';
-          updateStats();
-        } else {
-          $notice.innerText = dbNoticeText;
-          $statList.style.display = 'none';
-        }
       }
-    };
+    }
+  };
   web.addDocumentObserver(pageObserver, [
     '.notion-page-content',
     '.notion-collection_view_page-block',