feat(right-to-left): update api compat, rtl + right-indent tocs

src/extensions/right-to-left/client.css

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

src/extensions/right-to-left/client.mjs

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

src/extensions/right-to-left/mod.json

@@ -1,23 +1,21 @@
 {
-  "name": "right to left",
+  "name": "Right To Left",
-  "id": "b28ee2b9-4d34-4e36-be8a-ab5be3d79f51",
   "version": "1.5.0",
-  "description": "enables auto rtl/ltr text direction detection.",
+  "id": "b28ee2b9-4d34-4e36-be8a-ab5be3d79f51",
-  "preview": "right-to-left.jpg",
+  "description": "Enables automatic writing direction detection for languages that read right-to-left.",
-  "tags": ["extension", "usability"],
+  "tags": ["rtl", "language-support"],
   "authors": [
+    {
+      "name": "dragonwocky",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    },
     {
       "name": "obahareth",
-      "email": "omar@omar.engineer",
       "homepage": "https://omar.engineer",
       "avatar": "https://avatars.githubusercontent.com/u/3428118"
     }
   ],
-  "js": {
+  "clientStyles": ["client.css"],
-    "client": ["client.mjs"]
+  "clientScripts": ["client.mjs"]
-  },
-  "css": {
-    "client": ["client.css"]
-  },
-  "options": []
 }

src/registry.json

@@ -7,6 +7,7 @@
   "extensions/outliner",
   "extensions/word-counter",
   "extensions/line-numbers",
+  "extensions/right-to-left",
   "extensions/no-peeking",
   "extensions/focus",
   "themes/classic-dark"