Build a Notion-like editor with Rails, part 2

This article was originally published on Rails Designer In the first part of Build a Notion-like editor with Rails article, the foundation was built by creating the data model and the basic HTML layout. This article continues where that article ended. Besides making things look a fair bit prettier with Tailwind CSS, there will also be a fair amount of JavaScript written using Stimulus. Above GIF is what the aim is for this second part. Updating the UI with Tailwind CSS Let's update the two views that are there now. While I often look at bare HTML to focus on the functionality first, the designer in me needs to add some CSS rather sooner than later. Let's update some of the partials to make things more editor-like: # app/views/pages/edit.html.erb Just some classes to the ol-element to space things a bit better. # app/views/pages/_block.html.erb Let's remove the submit button and pass some base CSS classes that are needed for every block. Notice the field-sizing class? It will resize the textarea based on its content. It is still an experimental feature and support is limited, so for browsers that don't support it, a Stimulus controller will be added. # app/views/blocks/editable/block/_heading.html.erb Here the the base_css is passed along with some level-specific classes for the font-size. # app/views/blocks/editable/block/_text.html.erb Just some basic CSS for the text blocks. And with that the editor is already looking better. Nice work, Picasso!

Mar 6, 2025 - 18:21

Build a Notion-like editor with Rails, part 2

This article was originally published on Rails Designer

In the first part of Build a Notion-like editor with Rails article, the foundation was built by creating the data model and the basic HTML layout. This article continues where that article ended.

Besides making things look a fair bit prettier with Tailwind CSS, there will also be a fair amount of JavaScript written using Stimulus.

Above GIF is what the aim is for this second part.

Updating the UI with Tailwind CSS

Let's update the two views that are there now. While I often look at bare HTML to focus on the functionality first, the designer in me needs to add some CSS rather sooner than later. Let's update some of the partials to make things more editor-like:

# app/views/pages/edit.html.erb
 id="blocks" class="flex flex-col mx-auto max-w-prose gap-y-4">
  <%= render partial: "pages/block", collection: @page.blocks %>


<%= button_to "Add text field", page_blocks_path(@page), params: {blockable_type: "Block::Text"} %>
<%# etc. %>

Just some classes to the ol-element to space things a bit better.

# app/views/pages/_block.html.erb

  <%= form_with model: [block.page, block] do |form| %>
    <%= form.fields_for :blockable do |blockable_form| %>
      <%= render partial: "blocks/editable/#{block.blockable_type.underscore}",
        locals: {
          form: blockable_form, base_css: "w-full field-sizing resize-none focus:outline-0"
          }
      %>
    <% end %>
  <% end %>

Let's remove the submit button and pass some base CSS classes that are needed for every block. Notice the field-sizing class? It will resize the textarea based on its content. It is still an experimental feature and support is limited, so for browsers that don't support it, a Stimulus controller will be added.

# app/views/blocks/editable/block/_heading.html.erb
<%# locals: (form:, base_css:) -%>
<%= form.text_area :content, rows: 1, class: class_names(base_css, "font-bold text-gray-800", { "text-5xl": form.object.level == 1, "text-3xl": form.object.level == 2, "text-2xl": form.object.level == 3, "text-xl": form.object.level == 4 }) %>

Here the the base_css is passed along with some level-specific classes for the font-size.

# app/views/blocks/editable/block/_text.html.erb
<%# locals: (form:, base_css:) -%>
<%= form.text_area :content, rows: 1, class: class_names(base_css, "text-lg font-gray-900") %>

Just some basic CSS for the text blocks.

And with that the editor is already looking better. Nice work, Picasso!