Improve rich text editor (#23)

Improve the rich text editor to disable auto-save, and add a basic "Save
All" button.

.vscode/settings.json

@@ -20,6 +20,7 @@
     "titleBar.activeBackground": "#8d5eb7",
     "titleBar.activeForeground": "#e7e7e7",
     "titleBar.inactiveBackground": "#8d5eb799",
-    "titleBar.inactiveForeground": "#e7e7e799"
+    "titleBar.inactiveForeground": "#e7e7e799",
+    "statusBar.background": "#8d5eb7"
   }
 }

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    panda_cms (0.5.8)
+    panda_cms (0.5.10)
       activestorage-office-previewer (~> 0.1)
       amazing_print (~> 1.6)
       awesome_nested_set (~> 3.7)

app/assets/config/panda_cms_manifest.js

@@ -1 +1,2 @@
 //= link_tree ../builds/ .css
+//= link_tree ../../javascript/panda_cms .js

app/assets/stylesheets/panda_cms/application.tailwind.css

@@ -41,7 +41,6 @@
 
 .ql-editor {
   border: none !important;
-  /* font-size: 1.3rem !important; */
   padding: 0 !important;
   margin: 0;
 

app/components/panda_cms/page_menu_component.html.erb

@@ -1,22 +1,16 @@
-<% inactive_nav_styles = "border-gray-200 text-slate-600 " %>
-<% active_nav_styles = "bg-gray-100 text-blue-900 border-blue-900 " %>
-<nav class="pl-8 font-sans font-sm">
-  <ul role="list" class="">
+<nav class="<%= @styles[:container] %>">
+  <ul role="list" class="p-0 m-0">
     <li>
-      <a href="<%= menu_item.page.path %>" class="border-l-2 hover:bg-gray-50 group px-3 py-2.5 text-lg leading-6 font-semibold <%= menu_item.page == PandaCms::Current.page ? active_nav_styles : inactive_nav_styles %>">
+      <a href="<%= menu_item.page.path %>" class="<%= menu_item.page == PandaCms::Current.page ? @styles[:current_page_active] : @styles[:current_page_inactive] %>">
         <%= menu_item.text %>
       </a>
     </li>
-    <div>
-      <ul class="mt-1">
-        <% PandaCms::MenuItem.each_with_level(menu_item.descendants) do |submenu_item, level| %>
-          <li data-level="<%= level %>" data-page-id="<%= submenu_item.page.id %>" <% if level > 1 && !PandaCms::Current.page.id.in?(submenu_item.page.self_and_ancestors.ids + submenu_item.page.siblings.ids) %> class="hidden"<% end %>>
-            <a href="<%= submenu_item.page.path %>" class="<%= helpers.menu_indent(submenu_item) %> border-l-2 hover:bg-gray-50 block px-3 py-2.5 text-base leading-6 font-regular <%= submenu_item.page == PandaCms::Current.page ? active_nav_styles : inactive_nav_styles %>">
-              <%= submenu_item.page.title %>
-            </a>
-          </li>
-        <% end %>
-      </ul>
-    </div>
+    <ul>
+      <% PandaCms::MenuItem.each_with_level(menu_item.descendants) do |submenu_item, level| %>
+        <li data-level="<%= level %>" data-page-id="<%= submenu_item.page.id %>" class="<% if level > 1 && !PandaCms::Current.page.id.in?(submenu_item.page.self_and_ancestors.ids + submenu_item.page.siblings.ids) %>hidden <% end %> <%= submenu_item.page == PandaCms::Current.page ? @styles[:active] : @styles[:inactive] %>">
+          <a href="<%= submenu_item.page.path %>" class="<%= helpers.menu_indent(submenu_item, indent_with: @styles[:indent_with]) %>"><%= submenu_item.page.title %></a>
+        </li>
+      <% end %>
+    </ul>
   </ul>
 </nav>

app/components/panda_cms/page_menu_component.rb

@@ -5,7 +5,7 @@ class PageMenuComponent < ViewComponent::Base
     attr_accessor :menu_item
     attr_accessor :children
 
-    def initialize(page:, start_depth:)
+    def initialize(page:, start_depth:, styles: {})
       start_page = if page.depth == start_depth
         page
       else
@@ -16,6 +16,10 @@ def initialize(page:, start_depth:)
       @menu_item = menu.menu_items.order(:lft)&.first unless menu.nil?
 
       @children = menu_item&.descendants unless menu_item.nil?
+
+      # Set some default styles for sanity
+      @styles = styles
+      @styles[:indent_with] ||= "pl-2"
     end
   end
 end

app/helpers/panda_cms/application_helper.rb

@@ -94,20 +94,20 @@ def table_indent(item_with_level_attribute)
       level_indent(item_with_level_attribute.level)
     end
 
-    def menu_indent(item_with_level_attribute)
+    def menu_indent(item_with_level_attribute, indent_with: "pl-")
       case item_with_level_attribute.level
       when 0
-        "pl-0"
+        "#{indent_with}0"
       when 1
-        "pl-4"
+        "#{indent_with}4"
       when 2
-        "pl-8"
+        "#{indent_with}8"
       when 3
-        "pl-12"
+        "#{indent_with}12"
       when 4
-        "pl-16"
+        "#{indent_with}16"
       else
-        "pl-20"
+        "#{indent_with}20"
       end
     end
   end

app/javascript/controllers/text_field_update_controller.js → app/javascript/panda_cms/controllers/slug_controller.js

@@ -1,5 +1,6 @@
-import { Controller as PandaCmsController } from "@hotwired/stimulus";
-export default class extends PandaCmsController {
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
   static targets = [
     "existing_root",
     "input_select",
@@ -10,18 +11,12 @@ export default class extends PandaCmsController {
   connect() {}
 
   generatePath() {
-    this.output_textTarget.value =
-      "/" + this.createSlug(this.input_textTarget.value);
+    this.output_textTarget.value = "/" + this.createSlug(this.input_textTarget.value);
   }
 
   setPrePath() {
-    this.parent_slugs =
-      this.input_selectTarget.options[
-        this.input_selectTarget.selectedIndex
-      ].text.match(/.*\((.*)\)$/)[1];
-    this.output_textTarget.previousSibling.innerHTML = (
-      this.existing_rootTarget.value + this.parent_slugs
-    ).replace(/\/$/, "");
+    this.parent_slugs = this.input_selectTarget.options[this.input_selectTarget.selectedIndex].text.match(/.*\((.*)\)$/)[1];
+    this.output_textTarget.previousSibling.innerHTML = (this.existing_rootTarget.value + this.parent_slugs).replace(/\/$/, "");
   }
 
   // TODO: Invoke a library or helper which can be shared with the backend
@@ -39,13 +34,11 @@ export default class extends PandaCmsController {
   }
 
   trimStartEnd(str, ch) {
-    var start = 0,
-      end = str.length;
+    var start = 0;
+    var end = str.length;
 
     while (start < end && str[start] === ch) ++start;
-
     while (end > start && str[end - 1] === ch) --end;
-
     return start > 0 || end < str.length ? str.substring(start, end) : str;
   }
 }

app/javascript/base.js → app/javascript/panda_cms/panda_cms_base.js

@@ -3,14 +3,11 @@ import { Application as PandaCmsApplication } from "@hotwired/stimulus";
 const panda_cms = PandaCmsApplication.start();
 
 // Configure Stimulus development experience
-panda_cms.debug = location.hostname === "localhost";
+panda_cms.debug = false;
 window.pandaStimulus = panda_cms;
 
-export { panda_cms };
-
-// Eager load all controllers defined in the import map under controllers/**/*_controller
-import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
-eagerLoadControllersFrom("panda_cms/controllers", panda_cms);
+// import { SlugController } from "./controllers/slug_controller";
+// panda_cms.register("slug", SlugController);
 
 import {
   Alert,
@@ -22,7 +19,7 @@ import {
   Popover,
   Toggle,
   Slideover,
-} from "panda_cms/vendor/tailwindcss-stimulus-components";
+} from "tailwindcss-stimulus-components";
 panda_cms.register("alert", Alert);
 panda_cms.register("autosave", Autosave);
 panda_cms.register("color-preview", ColorPreview);
@@ -33,5 +30,7 @@ panda_cms.register("slideover", Slideover);
 panda_cms.register("tabs", Tabs);
 panda_cms.register("toggle", Toggle);
 
-import RailsNestedForm from "panda_cms/vendor/stimulus-components-rails-nested-form";
+import RailsNestedForm from 'stimulus-components-rails-nested-form'
 panda_cms.register("nested-form", RailsNestedForm);
+
+export { panda_cms };