Replies: 9 comments 21 replies
-
|
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:
This is definitely doable. I actually had an idea for this by adding an
I'd love to come up with first party support for this. I hadn't even thought of footnotes.
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.
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:
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 ?
I'd love to see what you have so I can better understand the request! Even just a video would work!
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.
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.
Oh this is a good one!
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. 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. Hardest part about tables is getting the UX experience "right".
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.
Bugs?! In a Seriously, always happy to help when you can get something together in an issue! |
Beta Was this translation helpful? Give feedback.
-
|
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…
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 👩🍳💋.)
❤️
Hmm, this gets into code I didn't write, but:
I think the first point is what pertains to this discussion.
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. :)
Yeah, I think I may not have been clear. Some things we'd like:
That sounds pretty sweet!
That does look pretty complex and impressive! It isn't too highly demanded of a feature for us yet.
Heh, I'm in no position to tell you you're wrong! Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
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.)
|
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 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. |
Beta Was this translation helpful? Give feedback.
-
|
@bjhess here's a quick prototype I threw together, still gotta polish it. 2024-11-08_01-59-23.remuxed.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
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?
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
One thing we might attack in 2025 is adding dropdown menus to our Rhino toolbar. Basically we don't want horizontal scrolling while browsing on PC, which means we've reached our max toolbar items. So we need to make some dropdowns. Curious if that was something you had planned for Rhino as we'd rather not invent our own technique that conflicts with your plans. |
Beta Was this translation helpful? Give feedback.
-
|
Undecided so far as to anything baked in. I built out a POC of "dropdowns" here: https://role-components.vercel.app/components/menu/ Ideally, people can bring their own dropdowns. Right now many people have just been using the Shoelace dropdowns https://shoelace.style/components/dropdown/ As for dropdowns in the toolbar, probably not something I plan for adding for the current toolbar, except for maybe adding a "Text" dropdown that lets you select "Paragraph, h1, h2, h3", but thats more of a "select" than a "menu". |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your thoughts! |
Beta Was this translation helpful? Give feedback.
-
|
@KonnorRogers, I'm curious about this particular thing:
We've actually gotten that extension working in Pika, but there are a lot of flakey bits that have us a little concerned. Weird tabbing behavior, some various breakages, etc. If you have footnotes on your "somewhat soon" docket, I think we'd prefer to hold off. But if it's more "someday/maybe", we'd probably consider bringing in that Tiptap extension and maybe looking for a way to help shore it up. |
Beta Was this translation helpful? Give feedback.
-
|
its not really super high priority to me, and would probably be a plugin and not part of the main editor. its mostly just a "someday / maybe" |
Beta Was this translation helpful? Give feedback.
-
|
I also wanted to mention:
We're getting a fair bit of heat about our lack of Alt Text. I will probably start digging into a Rhino fork early in the new year to see if I can figure something out to propose. (Though I don't know the first thing about how to do it/bend Rhino to my will, so we'll see!) I read and considered this blog post as a way to write an extension, but it just seems that given it's handling images in particular (yay, Trix!) it makes the most sense to go directly into Rhino. |
Beta Was this translation helpful? Give feedback.
-
|
No apologies necessary! Just checking in. Curious to see what you've come up with. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Just a little update, I managed to get the TipTap / ProseMirror side 99% working (few issues with clicks not always registering, but workable) Today I'm working on spelunking through ActionText and how to modify the TrixAttachmen to add an extra attribute for Once I figure out how to add additional attributes to the Image attachments, I can store the alt text in the Rails backend. But digging through ActionText attachables and trying to find how to add additional attributes is proving to be a little time consuming, and also means the default editor won't ship with alt text (At least until I make a proper Rhino gem that can ship an initializer to patch it) soooo...thats where I'm at. https://github.com/rails/rails/blob/main/actiontext/lib/action_text/attachable.rb https://github.com/rails/rails/blob/main/actiontext/lib/action_text/attachables/remote_image.rb I'm not quite sure which spot is the right one to tackle, so if you have any ideas of how I can add a key / value to EDIT: I got this working. Will share more when I'm back at a computer. |
Beta Was this translation helpful? Give feedback.
-
|
Easier than expected: # config/initializers/actiontext_patch.rb
attributes = ActionText::TrixAttachment::ATTRIBUTES + ["alt"]
ActionText::TrixAttachment.const_set("ATTRIBUTES", attributes)
attributes = ActionText::Attachment::ATTRIBUTES + ["alt"]
ActionText::Attachment.const_set("ATTRIBUTES", attributes)<!-- app/views/active_storage/blobs/_blob.html.erb -->
<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
<% if blob.representable? %>
- <%= image_tag(blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ])) %>
+ <% blob_attributes = blob.full_attributes %>
+ <%= image_tag(blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]), alt: blob_attributes["alt"]) %>
<% end %>
<% caption = blob.try(:caption) %>
<figcaption class="attachment__caption <%= caption ? "attachment__caption--edited" : "" %>">
<% if caption %>
<%= caption.html_safe %>
<% else %>
<span class="attachment__name"><%= blob.filename %></span>
<span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
<% end %>
</figcaption>
</figure>Will file upstream with Rails if we can get proper hooks instead of MonkeyPatching. |
Beta Was this translation helpful? Give feedback.
-
|
Quite a bit to cleanup and document, but little demo that it is possible: https://bsky.app/profile/konnorrogers.com/post/3lfe753wzsc2i (file is 32mb so cant upload to GitHub) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @KonnorRogers! I agree that it'd be great to not have to monkey patch this, but I wonder what the odds are that that is going to be possible. Let me know if you need anything! |
Beta Was this translation helpful? Give feedback.
-
|
In my ongoing efforts to "influence" 😈 the next thing you work on in Rhino, I'm curious what you think of a zoom interface for clicking images? For example how you can click a cover on Album Whale to see a bigger version of the image. If this isn't in your vision for Rhino, we'll start thinking on another way. |
Beta Was this translation helpful? Give feedback.
-
|
Do you mean zoom in the editor interface? Or zoom in the final output? Zoom in the editor is hard because of the number of existing interactions, and seems largely...unnecessary?? Zoom in the final output would be out of scope of the editor, but I could put together docs and a code snippet of how you could do it. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, yes, zoom in the final output. If you have thoughts I’d appreciate seeing them, but totally up to you! Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Here's a video of it: 2025-02-07_00-16-05.remuxed.mp4And the JavaScript: function handleLightBox (e) {
const target = e.target
// Dont show light boxes in the editor
if (target.closest("rhino-editor")) { return }
// Dont show light boxes if not inside a trix rendered output
if (!target.closest(".trix-content")) { return }
// action-text-attachment only appears in final output, not in editor, so this is just an extra check.
const attachment = target.closest("action-text-attachment")
const image = target.closest("img")
// Check to make sure someone actually clicked the image.
if (!image || !attachment) {
return
}
const dialog = document.createElement("dialog")
dialog.classList.add("lightbox")
const clonedImage = image.cloneNode(true)
dialog.append(clonedImage)
clonedImage.style.setProperty("--aspect-ratio", `${image.naturalWidth} / ${image.naturalHeight}`)
document.body.append(dialog)
dialog.showModal()
dialog.addEventListener("close", () => {
dialog.remove()
})
}
document.addEventListener("click", handleLightBox)and finally the CSS: <style>
.trix-content .attachment--preview img:hover {
cursor: zoom-in;
}
.lightbox {
height: 75vh;
max-height: min(75vh, 600px);
width: 75vw;
max-width: min(75vw, 800px);
display: grid;
place-content: center;
}
.lightbox img {
display: block;
height: auto;
margin: auto;
width: 100%;
max-width: 100%;
max-height: 100%;
aspect-ratio: var(--aspect-ratio, 16 / 9);
}
</style>And here's a branch where I did a little test run: https://github.com/KonnorRogers/rhino-editor/tree/konnorrogers/test-out-lightbox-implementation I think that should square you away. Let me know if you have any questions! |
Beta Was this translation helpful? Give feedback.
-
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:
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!
* 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. 😆
Beta Was this translation helpful? Give feedback.
All reactions