Support for inline uneditable/dynamic nodes

[mpreziuso]

First off, thanks for creating Svedit, it's a really great library! I appreciate how flexible it is and the thoughtful design decisions that went into it. I've been following it for a while, it's really cool work!

I was wondering if inlining uneditable/dynamic nodes was something on your roadmap. I'm thinking of cases like @user-mentions (where usernames may change) or references to other resources that may change over time and would be inlined in a paragraph – essentially content that shouldn't be hardcoded in the document because it needs to stay in sync with external data.

I tried different approaches and managed to get pretty far with a very basic implementation, but I'm clearly going against the grain, especially because I'm trying not to change the core Svedit files so that I can easily update them as you drop new features.

The main issue is that since the content I'm inserting is dynamic, I'm inlining the node but not inserting the content in the model. This pretty much works but breaks when deleting content that follows that node, since the offsets calculated from the SelectionRange will be out of sync with the character length.

Have you already thought about this use case? Do you have any suggestions for how to approach this, or is this something you'd consider adding native support for? I'm happy to share more details about my current implementation if that would be helpful!

[johannesmutter]

Hey Michele,

Annotations are probably one available solution – as of now – to attach additional dynamic data to either a single character @ or a text like @Johannes.

The strings @ or @Johannes would be not dynamic, they are local and part of the text (it could be also a zero-width character to which the annotation is attached). But you could then visually hide them (plus add some padding) and render what appears like an inline block as an overlay on top of the bounding box of the <span> wrapping the single character string, via css anchor positioning. The annotation could contain any additional dynamic, non-editable meta data, e.g. the avatar of a user, their full_name and a profile_link.

selection highlighting

One challenge to solve would be to also display a "selection highlight" on the overlay when the local annotated string is part of a selection. (@michael how can we pass this info to annotations that they are part of a selection?)

2x anchor positioned overlays: inline and popover preview card. One always visible, the other on hover	selecting the annotation with visualisation matching the text selection

---

If the text is in the “minority” in a inline-text and inline nodes scenario, then using a node array where the node wrapper has display: inline and the children display: inline or display: inline-block/ flex is also something to consider. See below example interfaces for this:

source	source	my own designs for expandable/ stretch text

---

Related issues have been discussed here: Treat annotations as regular graph nodes

But we also discussed native "inline nodes". @michael had thoughts on it.

---

#inline-transclusions

[michael]

Hi Michele, thanks for the kind words! Glad you're building on top of Svedit already. 😅

I indeed considered inline nodes in the design, but haven't implemented them yet. However, I just took a bit of time to create an experimental PR (#146), showing the intended data model behind it and some quick-and-dirty changes to the selection mapping.

Like Johannes mentioned, inline nodes are technically annotations with some special properties:

• they always just occupy one character of the plain text string (you'd insert a symbol placeholder like $).
• That placeholder symbol is not rendered, but it's important t
• The source data is stored on an annotation node (just like Link has href, in my PR the Dino has a kind property). Then you can render any markup within the node.
• you can even do async stuff (just be aware that async fetching likely leads to flickering in the UI, unless you know already how much space the content will occupy and render a placeholder)

I could definitely see this land in core, but I want to find the right abstraction and be aware of all the consequences (e.g. external copy and paste needs to deal with this, etc.), with the goal of making inline nodes possible but keeping as much of the related code in user-land because many users (like myself) will not need this.

What exactly are you building? Just to understand your use-case better...

[mpreziuso]

Hey Johannes and Michael,
Thanks so much for the detailed responses and for taking the time to create that experimental PR (#146), Michael, I really appreciate it!

I tested it out and adapted it to my use case, and it works much better than what I had before. The approach of using a placeholder character with the data stored in an annotation node is exactly what I needed.
I've also added a '/' command using overlays - does that sound like the right approach or would you recommend handling slash commands differently?

Interestingly, I had gone down the annotation route initially, and at a high level what you're both describing is pretty close to what I implemented. The key difference is that I definitely didn't change the behaviour in process_node to avoid "core" changes, which is why I was running into those offset sync issues. Your approach of handling it properly in the selection mapping makes way more sense.

I'm working on an editor that allows referencing and displaying dynamic data inline. For example, imagine being able to reference a stock price - you could display the current price inline within a paragraph (which would update as the data changes), or you could also have a chart component (as a separate node, obviously) that shows the stock price over time. This is part of a larger project, but the editor component is a core piece of it - happy to share more details via email if that's helpful.

Thanks again for the quick turnaround on this!

[michael]

You're welcome!

I'd suggest that you really make a copy of Svedit.svelte and own that code in your project for now. I'm sure you'll encounter some bugs/edge cases that you can then easily fix yourself. Once this stabilizes for you, I'd be happy to review a PR from you that adds inline nodes to core.

I've also added a '/' command using overlays - does that sound like the right approach or would you recommend handling slash commands differently?

Yes, I think that's great actually. Wouldn't want to add keyboard macro functionality to Svedit at this point. For now I'd do also the @mentions in an overlay, you can use the DOMSelection API to render it underneath the cursor.

Thanks for sharing the context in which you're using Svedit!