How to find and reference the part of the syntax tree that corresponds to currently selected text

[jehillert]

Say I have an HTML document in which I have selected a sentence with the cursor. How would I find and manipulate the text in the AST? I have looked for utilities that might accept positional information obtained from the DOM, and let you wrap/decorate it with a callback, but I can't tell if the ones I looked at do what I want. I did look at the unified-doc project, and I see the functionality I want is in there, but it seems to have last been updated 3-4 years ago. I would rather use something that is actively maintained.

[wooorm]

Why? And what if the DOM is changed (by browser extensions, or other scripts)?

There are probably things that are maintained. The gist of what you want is not too complex and depends more on what you want to do and what else you are using (say, react).

[jehillert]

I really just want to know what utilities will let me do the thing that I am asking, which is how would I access the part of the AST that corresponds to the user's current text selection.

[ChristianMurphy]

Hey again @jehillert! 👋
We're asking more questions because your question is a bit vague.
The recommendations from our last conversation remain https://github.com/orgs/unifiedjs/discussions/235#discussioncomment-8621575

If I just figure out how to make the equivalent of local annotations to parts of the syntax tree that corresponds to my text selection

Big picture questions:

1. What do you want/need to do with highlights?
   • Is this a document preview app? A document editing app? Do you need the information to be persisted? Something else entirely?
2. Is react native a hard or soft requirement? Could this be handled as a web app without dealing with native bridges?
3. You mention both performance and code complexity concerns, what are the constraints you need to work with?

Finer-grained questions:

1. Are you persisting source map information? If so how are you passing that to React?
2. How are you tracking user selections today?
3. What have you tried so far to add this feature?
4. What does your unified/rehype pipeline look like?

[jehillert]

.

[ChristianMurphy]

Taking a few steps back.
It really sounds like you're building an editing experience more than a pure preview experience.
You may want to consider leveraging an editor framework like slate, which is specifically designed to handle use cases like this https://jkrsp.com/slate-highlight-last-active-selection/
There are also full native options like the ones noted here: https://docs.expo.dev/guides/editing-richtext/#native-editors

---

Hard requirement ... so native behavior everywhere I don't need a webview

Webview may be an easier entry point for HAST, but it is also possible to translate all content to react native.
A related project in the MDX space you could look at for reference https://github.com/danieldunderfelt/rn-mdx

I want to continue adding document types that can be converted to HTML and marked up, so unified is definitely the way to go

Are you associating the highlights to your normalized HTML, or back to the source document?

User selections are done with a tedious hook and oldschool javascript. I have a hook that makes the user selection expand to the nearest whole word, just out of preference (quicker to start a drag selection, or just global highlight the term alone). But there is a check if the touch is within the boundaries of a mark with a 'markup' className. If it is, there isn't really a selection. I just dim the color, and I already know the text because it's known by redux. All changes to the selection object are forwarded to RN, but more importantly the ID of whichever markup is selected. So I can add comments in react native, and I know which markups to associate them with (which I do because I have one screen, a sidebar, and a copy/paste pallet that are color coded to the markups in the webview and have the comments added nested in via accordion)

Unclear based off your answer here.
If you aren't using the selection API, you probably should https://developer.mozilla.org/en-US/docs/Web/API/selection

In addition you probably want to put some form of unique identifier to each node.
Then use the Selection API to find the first and last node, then use https://github.com/mrzmmr/unist-util-find-all-between to find all related nodes.

I may misunderstand the question. I keep a clean copy of every document after it's been sanitized and passed through mammoth (if word), and through mozilla readability library, stored in MMKV but not in active RN state. The app lets you share urls and converts those into readable view for markup (currently with the backend service I wrote. So I only get the document once so changes to the websites at the source don't corrupt positional data.

I'm more getting at how does React know what part of the document you are trying to reference.
You partially answered this above.

[jehillert]

If you aren't using the selection API, you probably should https://developer.mozilla.org/en-US/docs/Web/API/selection

In addition you probably want to put some form of unique identifier to each node.
Then use the Selection API to find the first and last node, then use https://github.com/mrzmmr/unist-util-find-all-between to find all related nodes.

I am using selection API, and this is exactly what I was looking for. Thanks.