From https://once.com/writebook

app/views/pages/_form.html.erb

@@ -0,0 +1,3 @@
+<%= leafable_edit_form(page, id: "leafable-editor") do |form| %>
+  <%= form.markdown_area :body, toolbar: "house_toolbar", required: true, autofocus: true, class: "page__editor" %>
+<% end %>

app/views/pages/_house_toolbar.html.erb

@@ -0,0 +1,41 @@
+<%= house_toolbar id: "house_toolbar" do %>
+  <%= house_toolbar_button "bold" do %>
+    <%= image_tag "text-bold.svg", aria: { hidden: "true" }, size: "16", class: "colorize--black" %>
+    <span class="for-screen-reader">Text style: bold</span>
+  <% end %>
+
+  <%= house_toolbar_button "italic" do %>
+    <%= image_tag "text-italic.svg", aria: { hidden: "true" }, size: "16", class: "colorize--black" %>
+    <span class="for-screen-reader">Text style: italic</span>
+  <% end %>
+
+  <%= house_toolbar_button "quote" do %>
+    <%= image_tag "text-quote.svg", aria: { hidden: "true" }, size: "18", class: "colorize--black" %>
+    <span class="for-screen-reader">Text style: quote</span>
+  <% end %>
+
+  <%= house_toolbar_button "code" do %>
+    <%= image_tag "text-code.svg", aria: { hidden: "true" }, size: "18", class: "colorize--black" %>
+    <span class="for-screen-reader">Text style: code</span>
+  <% end %>
+
+  <%= house_toolbar_button "link" do %>
+    <%= image_tag "text-link.svg", aria: { hidden: "true" }, size: "18", class: "colorize--black" %>
+    <span class="for-screen-reader">Text style: link</span>
+  <% end %>
+
+  <%= house_toolbar_button "bulletList" do %>
+    <%= image_tag "text-bullets.svg", aria: { hidden: "true" }, size: "18", class: "colorize--black" %>
+    <span class="for-screen-reader">Text style: bulleted list</span>
+  <% end %>
+
+  <%= house_toolbar_button "numberList" do %>
+    <%= image_tag "text-numbers.svg", aria: { hidden: "true" }, size: "18", class: "colorize--black" %>
+    <span class="for-screen-reader">Text style: numbered list</span>
+  <% end %>
+
+  <%= house_toolbar_file_upload_button do %>
+    <%= image_tag "text-image.svg", aria: { hidden: "true" }, size: "18", class: "colorize--black" %>
+    <span class="for-screen-reader">Add image</span>
+  <% end %>
+<% end %>

app/views/pages/edit.html.erb

@@ -0,0 +1,34 @@
+<% content_for(:title) { "Edit #{ @page.title }" } %>
+
+<% content_for :header do %>
+  <%= render "leafables/edit_header", leaf: @leaf, book: @book %>
+<% end %>
+
+<% content_for :toolbar do %>
+  <div class="page-toolbar fill-selected align-center gap-half margin-block-end-double">
+    <%= editing_mode_toggle_switch(@leaf, checked: true) %>
+
+    <span class="separator margin-inline-half" aria-hidden="true"></span>
+
+    <span class="overflow-y overflow-hide-scrollbar">
+      <%= render "house_toolbar" %>
+    </span>
+
+    <span class="separator margin-inline-half" aria-hidden="true"></span>
+
+    <%= render "leaves/history", leaf: @leaf %>
+
+    <button type="submit" form="leafable-editor" class="btn flex page-toolbar__save flex-item-justify-end flex-item-no-shrink txt-small">
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Save</span>
+    </button>
+  </div>
+<% end %>
+
+<article class="layout--reading">
+  <%= render "leaves/being_edited_indicator", leaf: @leaf %>
+
+  <%= render "pages/form", book: @book, page: @page %>
+</article>
+
+<%= render "leaves/edit_footer", leaf: @leaf %>

app/views/pages/edits/show.html.erb

@@ -0,0 +1,67 @@
+<% content_for(:title) { "Changes to #{ @leaf.title }" } %>
+<% @layout_class = "books" %>
+
+<% content_for :header do %>
+  <nav>
+    <%= link_to edit_leafable_path(@leaf), class: "btn" do %>
+      <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Go back</span>
+    <% end %>
+
+    <div class="breadcrumbs">
+      <%= render "books/index_link" %>
+      <span class="flex-item-no-shrink">▸</span>
+      <%= link_to @leaf.book.title, @leaf.book %>
+      <span class="flex-item-no-shrink">▸</span>
+      <strong><%= @leaf.title %></strong>
+    </div>
+  </nav>
+<% end %>
+
+<div class="library">
+  <section class="txt-align-start">
+    <%= turbo_frame_tag :previous_version do %>
+      <header class="flex align-center justify-center gap">
+        <% if @edit.previous %>
+          <%= link_to page_edit_path(@leaf, @edit.previous), data: { turbo_action: :advance }, class: "btn btn--reversed txt-small" do %>
+            <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
+            <span class="for-screen-reader">Previous version</span>
+          <% end %>
+        <% else %>
+          <span class="btn btn-reversed txt-small" disabled>
+            <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
+            <span class="for-screen-reader">Previous version</span>
+          </span>
+        <% end %>
+
+        <h2 class="btn btn--reversed txt-medium margin-none overflow-ellipsis">
+          <%= time_ago_in_words(@edit.updated_at) %> ago
+        </h2>
+
+        <% if @edit.next %>
+          <%= link_to page_edit_path(@leaf, @edit.next), data: { turbo_action: :advance }, class: "btn btn--reversed txt-small" do %>
+            <%= image_tag "arrow-right.svg", aria: { hidden: true }, size: 24 %>
+            <span class="for-screen-reader">Next version</span>
+          <% end %>
+        <% else %>
+          <span class="btn btn-reversed txt-small" disabled>
+            <%= image_tag "arrow-right.svg", aria: { hidden: true }, size: 24 %>
+            <span class="for-screen-reader">Next version</span>
+          </span>
+        <% end %>
+      </header>
+
+      <%= @edit.page.body.to_html %>
+    <% end %>
+  </section>
+
+  <section class="page-edit__current txt-align-start">
+    <header class="flex align-center gap justify-center">
+      <%= link_to edit_leafable_path(@leaf), class: "btn btn--positive txt-medium center margin-none" do %>
+        Current
+      <% end %>
+    </header>
+
+    <%= @leaf.page.body.to_html %>
+  </section>
+</div>

app/views/pages/new.html.erb

@@ -0,0 +1,19 @@
+<% content_for(:title) { "New page" } %>
+
+<% content_for :header do %>
+  <nav>
+    <%= link_to @book, class: "btn flex-item-justify-start" do %>
+      <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Cancel</span>
+    <% end %>
+
+    <button type="submit" form="leafable-editor", class="btn flex-item-justify-end">
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Save</span>
+    </button>
+  </nav>
+<% end %>
+
+<article class="layout--reading">
+  <%= render "pages/form", book: @book, page: @page %>
+</article>

app/views/pages/update.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace dom_id(@leaf) do %>
+  <%= render "leaves/leaf", leaf: @leaf %>
+<% end %>