Using with Rails

[clairespop]

Hi

I tried using the instructions for using Rhino with Rails 7.1 that can be found on the Rhino webpage https://rhino-editor.vercel.app/tutorials/usage-with-rails/#view-helpers and all I got was a blank page. It worked fine with action text. The html for the form is there but it is hidden.

The instructions for Rails on the github page https://github.com/KonnorRogers/rhino-editor/blob/main/docs/src/_documentation/tutorials/04-usage-with-rails.md are quite different and don't make any sense to me. I don't believe "<%%" is a thing in Rails. I've cut and pasted the github instructions below.

Let's imagine we had a model like the following:

<%= render Syntax.new("rb") do %> class Post < ApplicationRecord has_rich_text :body end <% end %>

To achieve the same interaction as form.rich_text_area :body from Trix, we can do the following:

<%= render Syntax.new("erb") do %> <%%= form_with model: @post do |form| %> <%%= form.hidden_field :body, id: form.field_id(:body), value: form.object.body.try(:to_trix_html) || form.object.body %> <rhino-editor input="<%%= form.field_id(:body) %>" data-blob-url-template="<%%= rails_service_blob_url(":signed_id", ":filename") %>" data-direct-upload-url="<%%= rails_direct_uploads_url %>"

<%% end %> <% end %>

Which should output HTML that looks something like this:

<%= render Syntax.new("html") do %>

<% end %>

[KonnorRogers]

Do you have a repo you can share?

the raw markdown files have <%%= because the docs are written in Bridgetown and it's the way to escape ERB interpolation.

The final markup should look like this:

<%= form_with model: @post do |form| %>
  <%= form.hidden_field :body, id: form.field_id(:body), value: form.object.body.try(:to_trix_html) || form.object.body %>
  <rhino-editor
    input="<%= form.field_id(:body) %>"
    data-blob-url-template="<%= rails_service_blob_url(":signed_id", ":filename") %>"
    data-direct-upload-url="<%= rails_direct_uploads_url %>"
  ></rhino-editor>
<% end %>

if it's rendering blank, my first guess is that you're not importing the library which registers the web component.

[H-Hp]

The instructions you've provided from the GitHub page seem to be a bit outdated and might not work with the latest version of Rails. However, I can guide you through the process of integrating Rhino Editor with your Rails 7.1 application.

First, make sure you have installed the rhino-rails gem by adding it to your Gemfile:

gem 'rhino-rails'

Then, run bundle install to install the gem.

Next, you need to import the necessary JavaScript files. You can do this by creating a new file in app/javascript/controllers/index.js and adding the following code:

import { Application } from "@hotwired/stimulus"
import RhinoController from "rhino-rails/controllers/rhino_controller"

const application = Application.start()
application.register("rhino", RhinoController)

This will register the Rhino Controller with Stimulus, which is required for Rhino to work properly.

Now, in your view file where you want to use the Rhino Editor, you can use the rhino_editor helper like this:

<%= form_with(model: @post, data: { controller: "rhino" }) do |form| %>
  <%= form.rhino_editor :body %>
  <%= form.submit %>
<% end %>

The data: { controller: "rhino" } attribute is required to enable the Rhino Controller for that specific form.

If you want to customize the Rhino Editor's behavior or appearance, you can pass additional options to the rhino_editor helper. For example:

<%= form.rhino_editor :body, toolbar: :full, placeholder: "Enter your content here..." %>

This will render the Rhino Editor with the full toolbar and a placeholder text.

Make sure to import any necessary stylesheets or JavaScript files required by Rhino Editor. You can follow the instructions in the Rhino Editor documentation for this step.

With these steps, you should be able to integrate Rhino Editor with your Rails 7.1 application. If you're still experiencing issues, please let me know, and I'll do my best to help you further.

[KonnorRogers]

This has to be AI right? Rhino-rails and half of these APIs doesn't even exist...