fix(word-counter): #761 count words using chars outside latin alphabet

otherwise cells reverse on hover / do not sync between header and rows

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
-  .notion-table_of_contents-block
-  > div
-  > div
-  > a
-  > div
-  > div[style*='margin-left: 24px'] {
+/* indent rtl toc header levels,
+ * https://github.com/notion-enhancer/notion-enhancer/issues/616 */
+.notion-table_of_contents-block 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'] {
+.notion-table_of_contents-block div[style*="margin-left: 48px"] {
   margin-inline-start: 48px;
 }

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

@@ -1,50 +1,52 @@
 /**
  * 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 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"])`,
+export default async (api) => {
+  const { addMutationListener } = api,
+    pageContentSelector = `
+      :is([placeholder="Untitled"],
+      .notion-page-content :is(
+        div[data-block-id]:not(.notion-column_list-block,
+          .notion-collection_view_page-block, .notion-header-block,
+          .notion-sub_header-block, .notion-sub_sub_header-block
+          .notion-toggle-block, .notion-table_of_contents-block),
+        .notion-header-block [placeholder="Heading 1"],
+        .notion-sub_header-block [placeholder="Heading 2"],
+        .notion-sub_sub_header-block [placeholder="Heading 3"],
+        .notion-toggle-block [placeholder="Toggle"],
+        .notion-table_of_contents-block a),
+      .notion-page-view-discussion [data-content-editable-leaf],
+      .notion-table-view-header-cell, .notion-table-view-cell,
+      .notion-board-view, .notion-gallery-view):not([dir])`,
+    listItemSelector = `:is(div[placeholder="List"], div[placeholder="To-do"],
+      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.display = 'inline-flex';
-      $equation.style.flexDirection = 'row-reverse';
+      $equation.style.direction = "rtl";
+      $equation.style.display = "inline-flex";
+      $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,
-  ]);
-  await web.whenReady();
-  autoAlignText();
-}
+  ].join(",");
+  addMutationListener(textareas, autoAlignText);
+};

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

@@ -1,23 +1,21 @@
 {
-  "name": "right to left",
-  "id": "b28ee2b9-4d34-4e36-be8a-ab5be3d79f51",
+  "name": "Right To Left",
   "version": "1.5.0",
-  "description": "enables auto rtl/ltr text direction detection.",
-  "preview": "right-to-left.jpg",
-  "tags": ["extension", "usability"],
+  "id": "b28ee2b9-4d34-4e36-be8a-ab5be3d79f51",
+  "description": "Enables automatic writing direction detection for languages that read right-to-left.",
+  "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": {
-    "client": ["client.mjs"]
-  },
-  "css": {
-    "client": ["client.css"]
-  },
-  "options": []
+  "clientStyles": ["client.css"],
+  "clientScripts": ["client.mjs"]
 }

src/extensions/word-counter/client.mjs

@@ -43,8 +43,8 @@ export default async (api, db) => {
   const updateStats = debounce(() => {
     if (!document.contains($page)) $page = document.querySelector(page);
     if (!$page) return;
-    const text = $page.innerText,
-      words = text.split(/[^\w]+/).length,
+    const text = $page.innerText.trim(),
+      words = text.length ? text.split(/\s+/).length : 0,
       sentences = text.split(".").filter((s) => s.trim()).length,
       blocks = $page.querySelectorAll("[data-block-id]").length;
     $wordCount.setCount(words);

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"