Skip to content

Rhino horizontal rule #619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jmilljr24 merged 2 commits into from
Jan 5, 2026
Merged

Rhino horizontal rule #619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c09c56e
remove shift click
jmilljr24 Jan 2, 2026
f4d67ea
add Horizontal rule package and button to editor
jmilljr24 Jan 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 31 additions & 36 deletions app/frontend/javascript/rhino/custom-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)"
Copy link
Collaborator

@maebeale maebeale Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need any of this Insert grid code anymore?

Copy link
Collaborator Author

@jmilljr24 jmilljr24 Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll make some video tutorials on using rhino, but essentially I dumbed this down a bunch to remove complexity. The code was adding grow-rows which was causing the cell high issues you notices. I removed all that. A user will simply add one cell at a time. Then add "columns" which just updates the parent grid class like "grid-cols-3".

Realistically most grids will be only be one or two rows. It will generally be easier to just create a new grid group if you want additional rows unless you need a bunch of cells to be dependent on one another for some reason.

@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();
Copy link
Collaborator

@maebeale maebeale Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment: this loses all that conditional logic and alerts above -- are we sure that's ok?

}}"
>
<slot name="table-tooltip">
<role-tooltip
Expand All @@ -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);

Expand Down
51 changes: 26 additions & 25 deletions app/frontend/javascript/rhino/extend-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
25 changes: 13 additions & 12 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down