A Rhino wishlist

[bjhess]

We're using Rhino for the Pika editor. We're thankful that Rhino exists–it has helped us create an editing experience that is very well-loved by our customers. Yet there's still lots we'd like to improve in the Pika editing experience.

Over here @KonnorRogers asked:

If you have any comments, concerns, any particular features you're looking for, gripes, etc.

I figured a discussion might be a better place to post these things. So here we are!

I am going to talk through the top desires and requests we have for the editor. I realize some/many of these things might be best served as Tiptap extensions. Bullet list time!

• Bubble menu* (we'll get updated to the latest gem soon!)
• Alt Text interface for photos. While most people don't have a clue about Alt Text, those that do are understandably passionate. We currently have code to push a caption into the alt text, but that's not quite right.
• Footnotes, which I've tried to bring in via this extension. I've not been able to figure it out, but it's more likely a me problem than a Rhino challenge.
• Image resize and alignment. This looks like the most promising extension, but with ActionText's differing markup for images we'd have to recreate it for Rhino, I think.
• Click image to zoom.
• Enhanced Markdown support. We really like what exists in Tiptap for Markdown support, but would like to also see the following supported:
  • Linking
  • Image linking
  • Footnotes
  • Tables, maybe?
• Support the same Markdown when pasting. We actually have some of this in place via some Prosemirror hacking, but this was built by not-me and I can't say that I really understand it. 😬
• Links in image captions
• Link full images. Not sure how this would interact with a zoom interface.
• An embed interface. Should be an option you have to turn on. Allow embedding of iframes from YouTube, Bandcamp, Spotify, etc. We've made use of the YouTube Tiptap extension, which is nice enough. Building similar "paste a URL for embed" support across many services might be a nicer interface, though it would be more work. Possibly building it for 5 example services and making it clear how others could contribute updates for their favorite service would work?
• Automatic anchor tag IDs for headings.
• Details elements (currently a Tiptap Pro extension)
• Tables* seems like it could be a pretty big challenge
• Divider/HR button in toolbar
• Add h1 - h6* is something we've enabled via Markdown using the Tiptap extension, though we haven't implemented the toolbar options to create h2-h6. Would be nice to have it built in.
• Some bugs here and there, but I'm not prepared at the moment to confirm they are bugs in Rhino vs Tiptap vs our own code. 😆

* Also in the 1.0 checklist

I would be happy to help make some of these things a reality in Rhino (or Tiptap). Where we have consensus it seems better to make improvements to the library rather than hacking them in just in our app. However, I'm not very comfortable in JS-land, so any help I can provide will be very slow to arrive. 😆

[KonnorRogers]

Please do not apologize! This is immensely helpful!

Let me do my best to address these issues and some of the challenges and ideas I have:

Alt Text interface for photos. While most people don't have a clue about Alt Text, those that do are understandably passionate. We currently have code to push a caption into the alt text, but that's not quite right.

This is definitely doable. I actually had an idea for this by adding an <input> when you have the image "focused" to be able to add plaintext alt text. It is a weird problem because captions aren't always the same as the alt text describing the image.

Footnotes, which I've tried to bring in via this extension. I've not been able to figure it out, but it's more likely a me problem than a Rhino challenge.

I'd love to come up with first party support for this. I hadn't even thought of footnotes.

Image resize and alignment. This looks like the most promising extension, but with ActionText's differing markup for images we'd have to recreate it for Rhino, I think.

This has been on my wishlist for a while. Would also love to be able to "float" images as well. It is quite challenging to get right and I have attempted this once before, although not for very long. I think its doable. I just don't know if I will need to patch ActionText, or if I can come up with a clever workaround.

Links in image captions

Should've filed an issue for this one! A big thing I wanted to differentiate from Trix is supporting rich text in captions. I know the issue, I'll work on a bug fix.

Issue filed here:

Enhanced Markdown support. We really like what exists in Tiptap for Markdown support, but would like to also see the following supported:

Linking
Image linking
Footnotes
Tables, maybe?

Making sure we're not getting terminology crossed here. When you say "markdown", do you mean "markdown inputs" that get translated to HTML by TipTap? Or are you using https://github.com/aguingand/tiptap-markdown ?

Support the same Markdown when pasting. We actually have some of this in place via some Prosemirror hacking, but this was built by not-me and I can't say that I really understand it. 😬

I'd love to see what you have so I can better understand the request! Even just a video would work!

Link full images. Not sure how this would interact with a zoom interface.

Not sure I follow what a "zoom interface" is. But linking to external images should be doable. Have to double check ActionText and see what has to happen to support it. And will probably want this to be something people "opt in" to and perhaps have an "allowlist" of domains. Security is always a concern with this stuff.

An embed interface. Should be an option you have to turn on. Allow embedding of iframes from YouTube, Bandcamp, Spotify, etc. We've made use of the YouTube Tiptap extension, which is nice enough. Building similar "paste a URL for embed" support across many services might be a nicer interface, though it would be more work. Possibly building it for 5 example services and making it clear how others could contribute updates for their favorite service would work?

I've talked with @afomera a little about this. IFramely seems pretty solid. I'd love to think through what an integration would look like for this that could support a number of services in a single API. Embeds are a very core part of rich text editing.

Automatic anchor tag IDs for headings.

Oh this is a good one!

Details elements (currently a Tiptap Pro extension)

Hmmm...I'm curious how they're doing it. It may be doable, but definitely not part of the "core" editor, but maybe available as an extension.

Tables* seems like it could be a pretty big challenge

Tables. Why'd it have to be tables. There's an issue here of how a team built Tables into their editor. So its definitely doable, and not by using "Custom Attachments" like you would in Trix.

#106

Hardest part about tables is getting the UX experience "right".

Divider/HR button in toolbar
Add h1 - h6* is something we've enabled via Markdown using the Tiptap extension, though we haven't implemented the toolbar options to create h2-h6. Would be nice to have it built in.

So, I have this core philosophy about the editor that the initial editor should not require any changes to ActionText out of the box, and as such introducing these tags to the "base" / "core" experience means "configuring" ActionText, maybe this is misguided and the wrong thing to do, especially as I start making a RhinoEditor gem for form helpers and such, but I do want to keep the core base experience lean, and then make the experience of adding extensions "seamless". Also, you're free to tell me I'm wrong here 😆 I'm just one person and definitely fallible.

Some bugs here and there, but I'm not prepared at the moment to confirm they are bugs in Rhino vs Tiptap vs our own code. 😆

Bugs?! In a contenteditable WYSIWYG?! No! Not possible!

Seriously, always happy to help when you can get something together in an issue!

[bjhess]

I've been trying to set up the repo, but am having some challenges. Is the Discord the best place to get some help working through them? On to the response…

[Alt text] is a weird problem because captions aren't always the same as the alt text describing the image.

For sure. (Side note: Alt text is one of the places where I'm excited for AI to help me out. When it hits an image description it's 👩‍🍳💋.)

Links in image captions

I know the issue, I'll work on a bug fix.

❤️

When you say "markdown", do you mean "markdown inputs" that get translated to HTML by TipTap? Or are you using https://github.com/aguingand/tiptap-markdown ?

Hmm, this gets into code I didn't write, but:

• In the editing experience, I'm just talking "markdown inputs" that get translated to HTML by Tiptap.
• We have our own "PastedMarkdown" extension that handles a user pasting in Markdown. It borrows heavily from clipboard.js in tiptap-markdown, but uses markdown-it for processing.

I think the first point is what pertains to this discussion.

Support the same Markdown when pasting.

I'd love to see what you have so I can better understand the request! Even just a video would work!

Here's the "PastedMarkdown" extension that we add to rhino at initialization time: https://gist.github.com/bjhess/57fd02e853c062b116e5923cb5952c7e (I did not write this code and thus deserve no credit for it. :)

Link full images. Not sure how this would interact with a zoom interface.

Not sure I follow what a "zoom interface" is. But linking to external images should be doable. Have to double check ActionText and see what has to happen to support it. And will probably want this to be something people "opt in" to and perhaps have an "allowlist" of domains. Security is always a concern with this stuff.

Yeah, I think I may not have been clear. Some things we'd like:

• The ability to click an image to get a zoomed view of it. As an example, we really like what we've done with the album covers in Album Whale. Click the cover to get a closer look at it.
• The ability to not just upload an image, but also to render an image from another domain. So getting an <img> tag on screen. (And also being able to do the markdown version of that with ![Alt text](URL).)
• The ability to make an image (uploaded or an image from another domain) link to a URL. This is less important to me, but I know some people would like it. Arguable whether it should be implemented as it's kind of confusing IMO.

I've talked with @afomera a little about this. IFramely seems pretty solid. I'd love to think through what an integration would look like for this that could support a number of services in a single API. Embeds are a very core part of rich text editing.

That sounds pretty sweet!

Tables. Why'd it have to be tables.

That does look pretty complex and impressive! It isn't too highly demanded of a feature for us yet.

I have this core philosophy about the editor that the initial editor should not require any changes to ActionText out of the box…Also, you're free to tell me I'm wrong here 😆 I'm just one person and definitely fallible.

Heh, I'm in no position to tell you you're wrong!

Thank you!

[KonnorRogers]

@bjhess yea discord is probably your best bet, i may need to fix up the README for installation / setup, the setup definitely isn't the easiest thing in the world.

[bjhess]

Ah, one more detail about bubble menu. Our ideal bubble menu would be one that can handle the link dialog right within the menu. Why? (I'm playing around with the sample editor on the Rhino website.)

• It's a bit odd for the input to be distant from the text the user is working with, especially on mobile. Though it appears the browser focuses and moves to the link entry field, which is good.
• Though the focus doesn't appear to work consistently? I'm clicking the bubble menu on a previously-linked bit of text and it doesn't seem to focus the dialog consistently. Also the URL isn't in the dialog when I get there. Let me know if you don't see the same thing.
• The big feature for a link in a bubble menu, though, is to be able to preview the link (click to open in new tab). "Checking my links" is a pretty common workflow for me when editing. Deleting the link from the bubble menu would also be nice as well. Kind of like the GDoc interface:

[KonnorRogers]

Oh this was already on my todo list to do revamp the UX around linking. Its quite janky and yup I see the same thing around not persisting the current URL, thanks for documenting it!

[bjhess]

Here's an interesting one: how might you support soft returns on mobile when you don't have access to shift+return?

I feel like this has been talked about, but I can't find it. When clicking the link toolbar button (in the toolbar or bubble menu), the highlighted text is not preserved such that when entering the link into the input you've lost track of what text you are actually linking.

[KonnorRogers]

I'm not sure I fully understand "soft return" in this case? You have an example of what you would expect it to do?

Are you looking to insert a <br> or <wbr> or similar on a "soft return"?

and link selection maintaining the selection background has been discussed, I got 0.13.x out to fix some other lingering bugs, but maintaining link selection is the next thing I'm tackling. Requires mucking around with decorators, but should be possible.

[KonnorRogers]

@bjhess here's a quick prototype I threw together, still gotta polish it.

2024-11-08_01-59-23.remuxed.mp4

[walterdavis]

This is often used when typesetting: a linefeed without the New Paragraph semantics. A paragraph should have some defined vertical space separating it from other paragraphs in the same parent element. But sometimes you really want a new line without that -- in a poem or an address block, for two good examples. In Markdown, you add two spaces to the end of the line and press return to get this. The output is a <br> rather than </p><p>. Walter

…

On Nov 8, 2024, at 12:31 AM, Konnor Rogers ***@***.***> wrote: I'm not sure I fully understand "soft return" in this case? You have an example of what you would expect it to do?

[bjhess]

Yes, poetry is exactly the use case! Works great on a computer, but we've had a customer wonder how they can do the same thing on mobile. It's certainly an edge case, but would be cool to offer an option.