Rhino horizontal rule (#619)

* remove shift click

* add Horizontal rule package and button to editor

Author: jmilljr24

app/frontend/javascript/rhino/custom-editor.js

@@ -49,6 +49,8 @@ class CustomEditor extends TipTapEditor {
           <slot name="heading-button">${this.renderHeadingButton()}</slot>
           <slot name="after-heading-button"></slot>
 
+          <slot name="hr-button">${this.renderHorizontalRuleButton()}</slot>
+
           <!-- Blockquote -->
           <slot name="before-blockquote-button"></slot>
           <slot name="blockquote-button">${this.renderBlockquoteButton()}</slot>
@@ -148,42 +150,10 @@ class CustomEditor extends TipTapEditor {
       <button
         type="button"
         class="toolbar__button rhino-toolbar-button"
-        title="Insert grid (Shift + click to enter custom dimensions)"
-        @click=${(event) => {
-          this.editor.chain().focus();
-
-          if (event.shiftKey) {
-            // Prompt user for custom dimensions
-            const input = prompt(
-              "Enter grid dimensions as columns,rows (e.g., 2,4):",
-              "2,2",
-            );
-            if (!input) return;
-
-            const [colsStr, rowsStr] = input.split(",");
-            const columns = parseInt(colsStr.trim(), 10);
-            const rows = parseInt(rowsStr.trim(), 10);
-
-            if (
-              isNaN(rows) ||
-              isNaN(columns) ||
-              rows <= 0 ||
-              columns <= 0 ||
-              rows > 6 ||
-              columns > 6
-            ) {
-              alert(
-                "Invalid dimensions! Rows and columns must be between 1 and 6.",
-              );
-              return;
-            }
-
-            this.editor.chain().insertGrid(columns, rows).run();
-          } else {
-            // Default grid insertion
-            this.editor.chain().insertGrid().run();
-          }
-        }}
+        title="Insert grid"
+        @click="${(event) => {
+          this.editor.chain().focus().insertGrid().run();
+        }}"
       >
         <slot name="table-tooltip">
           <role-tooltip
@@ -200,6 +170,31 @@ class CustomEditor extends TipTapEditor {
     `;
   }
 
+  renderHorizontalRuleButton() {
+    return html`
+      <button
+        class="toolbar__button rhino-toolbar-button"
+        type="button"
+        aria-describedby="horizontal rule"
+        data-role="toolbar-item"
+        @click="${(event) => {
+          this.editor.chain().focus().setHorizontalRule().run();
+        }}"
+      >
+        <slot name="table-tooltip">
+          <role-tooltip
+            id="horiztaon-rule"
+            hoist
+            part="toolbar-tooltip toolbar-tooltip__table"
+            exportparts=${this.__tooltipExportParts}
+          >
+            Horizontal Rule
+          </role-tooltip>
+        </slot>
+        <slot name="table-icon">---</slot>
+      </button>
+    `;
+  }
   renderTableButton() {
     const tableEnabled = true; // Boolean(this.editor?.commands.setAttachment);
 

app/frontend/javascript/rhino/extend-editor.js

@@ -1,31 +1,32 @@
-import "./custom-editor.js"
-import "./custom-editor.css"
-import { Table } from '@tiptap/extension-table'
-import { TableCell } from '@tiptap/extension-table-cell'
-import { TableHeader } from '@tiptap/extension-table-header'
-import { TableRow } from '@tiptap/extension-table-row'
-import Youtube from '@tiptap/extension-youtube'
-import TextAlign from '@tiptap/extension-text-align'
-import { Grid } from './grid/grid'
-import { GridCell } from './grid/gridCell'
+import "./custom-editor.js";
+import "./custom-editor.css";
+import { Table } from "@tiptap/extension-table";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
+import Youtube from "@tiptap/extension-youtube";
+import TextAlign from "@tiptap/extension-text-align";
+import { Grid } from "./grid/grid";
+import { GridCell } from "./grid/gridCell";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
 
 function extendRhinoEditor(event) {
-  const rhinoEditor = event.target
-  if (!rhinoEditor) return
+  const rhinoEditor = event.target;
+  if (!rhinoEditor) return;
 
   rhinoEditor.addExtensions(
-      Table,
-      TableRow,
-      TableHeader,
-      TableCell,
-      Youtube.configure({ nocookie: true }),
-      TextAlign.configure({
-        types: ['heading', 'paragraph'],
-      }),
-      Grid,
-      GridCell
-  )
+    Table,
+    TableRow,
+    TableHeader,
+    TableCell,
+    Youtube.configure({ nocookie: true }),
+    TextAlign.configure({
+      types: ["heading", "paragraph"],
+    }),
+    Grid,
+    GridCell,
+    HorizontalRule,
+  );
 }
 
-document.addEventListener("rhino-before-initialize", extendRhinoEditor)
-
+document.addEventListener("rhino-before-initialize", extendRhinoEditor);

package-lock.json

@@ -11,6 +11,7 @@
     "@rails/actiontext": "^8.1.100",
     "@rails/request.js": "^0.0.12",
     "@tailwindcss/vite": "^4.1.13",
+    "@tiptap/extension-horizontal-rule": "^3.14.0",
     "@tiptap/extension-table": "^3.13.0",
     "@tiptap/extension-table-cell": "^3.13.0",
     "@tiptap/extension-table-header": "^3.13.0",