ExtensionsBlock syntax
Horizontal rule
The horizontal rule extension: --- separators and the insertHorizontalRule command.
The horizontalRule extension renders --- separators as a line and adds the
insertHorizontalRule command.
Setup
Import HorizontalRuleExtension and pass it through the editor’s extensions option. Create the mount
element before this code runs:
import { Editor } from "@inksane/core";
import { HorizontalRuleExtension } from "@inksane/core/extensions/horizontal-rule";
const editor = new Editor({
element: document.getElementById("editor")!,
extensions: [HorizontalRuleExtension],
});The kit option is horizontalRule, while the import path uses horizontal-rule. BaseKit includes this feature. Disable it with BaseKit({ horizontalRule: false }).
What it adds
- Hides the whole
HorizontalRulenode and replaces it with an<hr class="inksane-hr">widget. - Converts pasted
<hr>elements to---.
Command
| Command | Description |
|---|---|
insertHorizontalRule({ pos? }) | Inserts --- on its own line. Blank lines are added when the target line already has content. Returns false for a range outside the document. |
editor.chain().insertHorizontalRule().focus().run();Keyboard
| Keys | Action |
|---|---|
Mod-Shift-- | insertHorizontalRule(). |
Styling
[data-inksane-editor-content] {
.inksane-mark-horizontal-rule {
width: 100%;
border-top: 1px solid #666;
margin-block: 24px;
}
.inksane-hr {
display: inline-block;
width: 100%;
height: 1px;
margin: 0;
border: none;
border-top: 1px solid #666;
vertical-align: middle;
}
}