obahareth / notion-rtl

ARCHIVED - A Chrome extension to enable RTL support in https://notion.so

notion-rtl

A browser extension to enable RTL support in https://notion.so

Archived

This project is now part of Notion Enhancer (which makes it work both in web and desktop). For instructions related to Notion Enhancer and its installation please see here.

If you have any issues or requests please report them here.

The source code now exists here.

Developing

1. Go to Chrome's extensions page
2. Click Load Unpacked
3. Select this repository's root
4. Make sure the Chrome Store version of the extension is turned off

Note: You may need to press the reload button on the unpacked version of the extension at times.

Testing

We have a set of public Notion pages to check the extension on, we're looking into adding integration testing based on them.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Mohamad Bahamdain 💻 🤔 📦

Dotan 💻

Ehsan Zumrut 👀

Fahme Bnchi 💻

Tom 📦

This project follows the all-contributors specification. Contributions of any kind welcome!

notion-rtl's Issues

Notion rtl not working

Notion RTL stopped working

I tried removing and readd the extension to chrome browser but It's not working.

Please Help..
Thank you!

Support for RTL with inline math

Thank you for this great extension!
When using RTL together with an inline math expression, it happens to reverse the order of the math symbols.

See how it displays 3 = ... instead of ... = 3

Find a way to make this work in the desktop apps

I tried making a script in Go that includes the script in ~/Library/"Application Support"/Notion/assetCache/{version}/index-*.html (on macOS) and it works, however that file gets deleted when relaunching Notion. I also tried unpacking the app.asar from inside /Applications/Notion.app and including that script in renderer/index.html (and even just tossing an H1 there), but it appears that HTML file is only used when launching the app and then a new one is downloaded from the website.

Here's the script tag for reference

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/obahareth/notion-rtl@master/index.js"></script>

Approaches I'm considering:

• Unpack the app.asar, modify the JS to somehow inject the script tag and persist that change across the index.html changes.
• Making a daemon in Go that watches changes to the Application Support/Notion/assetCache directory and re-inject the tag as necessary.

Automate Publishing New Versions to Browser Extension Marketplace

The publishing process is quite manual at the moment, finding a boilerplate which helps support many browsers and automates the release process would be extremely helpful.

Firefox support

Hi, thank you for this wonderful utility!

I just wanted to leave a request for a Firefox version of this extension—hopefully that will be smooth because both are on the WebExtensions API and I think just the namespace changes for some parts of the API (ie. using browser instead of chrome)

Extension not Working due to a Warning on Attribute Mutations

Hi @obahareth and thanks for the great extension!
Right now the extension isn't working for me and i'm getting a lot of these errors in the console

NOTION WARNING  Reverting mutation of attribute dir from "null" -> "auto" in component

I tried copying the components but they have circular json so here's a screenshot if this means anything to you

I'm on the latest version of Chrome (96.0.4664.93)

Let me know if there's anything I can help with/debug/etc... Or maybe just point me in the right direction.
Thanks alot!

The RTL is not working!

Today I found that the RTL not working on the Website or Notion Enhancer, Is this only with me>

RTL not Working on Some Database Pages

If you make a database page (e.g. a table, where the whole page is a table, not just an inline table) then the RTL styling doesn't work.

As of 1.3.0, RTL works on the following database pages:

• Tables
• Boards (Only on card titles and previews)
• Galleries

The approach of using dir="auto" does not work well with:

• Lists
• Calendars
• Timelines

We need to find an alternative approach for these database types.

Database Pages Direction Only Changes After Opening a Nested Page

Database pages are not turned to RTL by default, you have to open a subpage first for it to work.

See the example here:

Avoid polling and listen for node additions

The only reason we keep polling right now is to make sure that newly added blocks are RTL-styled, it would be faster/better to watch DOM node updates/additions somehow and apply our styling on the new nodes only.

(We also need to poll only once until .notion-page-content exists, even if we remove the continuous polling, we should keep the polling for the this part then clear out the handler).

RTL on toggle list

right to left does not work on toggle list... Don't know how to solve it but it will be helpful if someone can :)

RTL titles should align right.

Titles should align right.

It looks like this:

And should look like this:

Support New notion.site Domain

Notion released a new feature that uses a Notion.site domain, the extension doesn't currently work with it.

https://www.notion.so/blog/personalize-public-pages

Paddings and margins are broken

Original Version

RTL Version

If we compare the original and RTL versions, the paddings/margins are gone in the RTL version, probably because Notion uses a lot of *-left and *-right, we should probably replace them with *-start and *-end.

List items are not aligned properly

This is what list items look like currently

What they should look like:

Proposed solution: #7

Add Automated Testing

We need to have a testing suite to test that everything is working as expected (Perhaps Cypress is a good tool for this use case), it can use the public Notion pages I've set up for manual testing at the moment.