[BUG] Preview doesn't respect zero-width space.

[zyxir]

trafficstars

Describe the bug

Zero-width space (U+200B) are often used to markup part of a word. For example, in Make*ME*bold, if zero-width spaces are inserted between "e" and "*", and between "*" and "b", the "me" part of the work will be made bold, like MakeMEbold. This trick is discussed in this Stack Overflow question. Additionally, words in Chinese, Japanese, Korean are not separated by spaces, so as a Chinese user, using zero-width space is my only approach to make text bold, so this bug is VERY frustrating.

To Reproduce

1. Create a org-roam node named "Org-Roam-UI Test Node". In the buffer, write Make​*ME*​bold. Note that zero-width spaces have been added between "e" and "*", and between "*" and "b". In Emacs, you can insert zero width space by "C-x 8 RET".
2. Preview the node with org-roam-ui-mode.
3. Find out that zero-width spaces have been ignored by org-roam-ui, thus "ME" is not bold.

Expected behavior

Zero-width spaces are expected to make "ME" bold.

Screenshots

What browser were you using?

Microsoft Edge on Windows 10.

Additional context

If you have other methods of making part of a word bold, please aid me. You help would be appreciated!

[rasendubi]

First, I want to say that this is not the default behavior as it requires modifying org-emphasis-regexp-components to work.

The good news is that uniorg (the org parsing library) supports changing this parameter, so it's easy to fix. I see three roads:

1. Make org-roam-ui use user's variable and pass it as a parameter to uniorg. Hard to implement correctly because uniorg expects a JS regexp, not an emacs one.
2. Hard-code ZWS in org-roam-ui.
3. Hard-code ZWS as default in uniorg.

Options 2 and 3 make the change global for all users of org-roam-ui or uniorg respectively. This is probably fine though. You can submit a PR to change uniorg defaults here

[zyxir]

@rasendubi Thank you for your reply! However, it seems that you didn't understand my problem accurately.

As far as I know, there are two methods to markup a part of a word:

1. Modify org-emphasis-regexp-components. However, that only works on my own Emacs. As I have to export org files to other formats, that modified regexp may not be understand by every exporter.
2. So I choose another approach - use zero-width space. Zero-width space is just an invisible space that the user cannot see, but the parser could read it as a whitespace character. In my case, I just inserted zero-width space before and after the text I want to highlight, making the word visually unchanged, but interpreted as three separate words by the markup engine. In my case, org-emphasis-regexp-components is untouched.

So, in my opinion, changing org-emphasis-regexp-components cannot make the somehow disappeared zero-width spaces reappear.

[rasendubi]

Oh, I see. This is a uniorg bug then.

This is likely because javascript's \s class does not include ZWS but emacs's [:space:] does. The probable fix is to use \p{Zs} class for all unicode space characters instead.

Would you like to try that? You could change the default here, add your test case here, and see how this goes. This might also require adding a u regex flag here

[zyxir]

I will try it, thanks for the information!

[zyxir]

@rasendubi I have zero knowledge of JavaScript or TypeScript, and it is a bit hard for me to understand. I mean, I know how to fork the uniorg project, how to modify some code as you have instructed, how regexp works. However, something that I don't know yet has stopped me from further working on the bug:

How does uniorg functions with org-roam-ui? I thought uniorg would be a git submodule of org-roam-ui, so that I can tweak the code locally, and view the effect in the rendered org-roam-ui web pages, just like tweaking any part of Emacs. However, I found that org-roam-ui has no submodules. Then how does org-roam-ui utilize uniorg? I found some contents about uniorg in package.json and other files, is uniorg like a package or something, that is automatically installed as I install org-roam-ui? Sorry this may be silly, but I have no idea how the magic of JavaScript works.

Maybe I should learn JavaScript, TypeScript, and other web-related things from scratch? By the way I am willing to learn new things.

[tefkah]

this is super late, but since JS projects have so many dependencies they work with a package manager, in our case yarn. There are no submodules, when you clone the project you do yarn install and all the packages are downloaded.

In your case, you can make it work by replacing the "^0.4.5" here https://github.com/org-roam/org-roam-ui/blob/16a8da9e5107833032893bc4c0680b368ac423ac/package.json#L69

with a link to your github repo (or folder) containing a package.json with "name": "uniorg-parse"

This is not very easy, sorry!

What you can also do is

yarn add patch-package
yarn add postinstall-postinsall

Then go to the node_modules folder in org-roam-ui and find the uniorg files you want to edit. Then do

yarn patch-package uniorg-parse # or whatever uniorg-package you are working on

You should see the differences. The CLI should give you instructions on how to submit a PR to uniorg, then I can update uniorg and it should work for you

[zyxir]

Thanks for the information. I'll look into it.