☰

Notion.so RTL support for written text

Changes dir attribute of page's div elements to 'auto' and forcing text aligning styles on selectable blocks

当前为 2020-03-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Notion.so RTL support for written text
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Changes dir attribute of page's div elements to 'auto' and forcing text aligning styles on selectable blocks
  6. // @author       OrenK
  7. // @include      https://www.notion.so/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     var GM_addStyle =
  14.         function(css) {
  15.             var style = document.getElementById("GM_addStyleBy8626") || (function() {
  16.                 var style = document.createElement('style');
  17.                 style.type = 'text/css';
  18.                 style.id = "GM_addStyleBy8626";
  19.                 document.head.appendChild(style);
  20.                 return style;
  21.             })();
  22.             var sheet = style.sheet;
  23.             sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
  24.         };
  25.  
  26.     GM_addStyle(".notion-selectable * { text-align: start !important; unicode-bidi: plaintext;}");
  27.     GM_addStyle(".notion-selectable.notion-to_do-block > div > div:nth-of-type(2) { margin-right: 4px !important; }");
  28.  
  29.     var observing = false;
  30.     var hasClass = function(element, className) {
  31.         return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
  32.     };
  33.     var notionPageCallback = function(mutations, observer) {
  34.         for (var i = 0; i < mutations.length; i++) {
  35.             for (var j = 0; j < mutations[i].addedNodes.length; j++) {
  36.  
  37.                 var addedNode = mutations[i].addedNodes[j];
  38.                 if (addedNode.nodeType === Node.ELEMENT_NODE) {
  39.                     if (addedNode.tagName === 'DIV' && hasClass(addedNode, 'notion-selectable')) {
  40.                         addedNode.setAttribute('dir', 'auto');
  41.                     }
  42.                     var divChildren = addedNode.getElementsByClassName('notion-selectable');
  43.                     for (var y = 0; y < divChildren.length; y++) {
  44.                         divChildren[y].setAttribute('dir', 'auto');
  45.                     }
  46.                 }
  47.             }
  48.         }
  49.     };
  50.     var documentCallback = function(mutations, observer) {
  51.         var notionPage = document.getElementsByClassName('notion-page-content');
  52.         if (notionPage.length !== 0 && !observing) {
  53.             var divElements = notionPage[0].getElementsByClassName('notion-selectable');
  54.             for (var i = 0; i < divElements.length; i++) {
  55.                 divElements[i].setAttribute('dir', 'auto');
  56.             }
  57.             notionPageObserver.observe(notionPage[0], { subtree: true, childList: true });
  58.             observing = true;
  59.  
  60.         }
  61.         if (notionPage.length === 0 && observing) {
  62.             notionPageObserver.disconnect();
  63.             observing = false;
  64.         }
  65.     };
  66.     var notionPageObserver = new MutationObserver(notionPageCallback);
  67.     var documentObserver = new MutationObserver(documentCallback);
  68.  
  69.     documentObserver.observe(document, {
  70.         subtree: true,
  71.         childList: true
  72.     });
  73. })();