editor-ruler — Word-like horizontal ruler extension (margins, first-line indent, guide lines)

[jlc488]

Hi all — we just released @devslab/editor-ruler-tiptap (Apache-2.0), a Tiptap extension that adds a Word-like horizontal ruler above the editor: drag handles for left/right margins and first-line indent (hanging indent included), plus guide lines you can drag out of the ruler.

Highlights

• Indentation is stored as a rulerIndent node attribute on configurable types (paragraph/heading by default) and rendered as plain inline CSS — getHTML() stays portable, and existing inline indentation parses back in
• A whole drag gesture is exactly one undo step (drag transactions skip history; release records baseline → final)
• Guide lines with snapping (purely visual — never in the document), cm/inch/px scales, browser-language UI
• Works with Tiptap v2 and v3 (@tiptap/core >= 2)

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { EditorRuler } from '@devslab/editor-ruler-tiptap';

new Editor({ element, extensions: [StarterKit, EditorRuler.configure({ unit: 'cm' })], content });

• Live demo (Tiptap tab): https://devslab-kr.github.io/editor-ruler/
• One-click StackBlitz: https://stackblitz.com/github/devslab-kr/editor-ruler/tree/main/examples/tiptap
• Source (editor-agnostic core + Froala/CKEditor 5 adapters too): https://github.com/devslab-kr/editor-ruler

Feedback and issues very welcome!