FEATURE: add horizontal_rule rich editor input rule (#31788)

renato · web-flow · commit d1a8ed1beb10 · 2025-03-12T22:45:10.000-03:00
Adds support to typing `---`, `___` or `***` to create a horizontal
rule.

Converting when typing `---` is actually written here as an en-dash +
`-`, because the typographer replacements extension turns `--` into an
en-dash first.

`___` and `***` are only triggered after a whitespace, because they
could also mean bold+italic.
diff --git a/app/assets/javascripts/discourse/app/static/prosemirror/core/inputrules.js b/app/assets/javascripts/discourse/app/static/prosemirror/core/inputrules.js
@@ -5,6 +5,7 @@ import {
   textblockTypeInputRule,
   wrappingInputRule,
 } from "prosemirror-inputrules";
+import { TextSelection } from "prosemirror-state";
 
 export function buildInputRules(extensions, schema, includeDefault = true) {
   const rules = [];
@@ -29,6 +30,8 @@ export function buildInputRules(extensions, schema, includeDefault = true) {
         markInputRule(/(?:^|(?<!\*))\*([^*]+)\*$/, schema.marks.em),
         markInputRule(/(?<=^|\s)_([^_]+)_$/, schema.marks.em),
         markInputRule(/`([^`]+)`$/, schema.marks.code),
+
+        new InputRule(/^(\u2013-|___\s|\*\*\*\s)$/, horizontalRuleHandler),
       ]
     );
   }
@@ -126,3 +129,13 @@ function markInputRule(regexp, markType, getAttrs) {
     return tr;
   });
 }
+
+function horizontalRuleHandler(state, match, start, end) {
+  const tr = state.tr;
+  tr.replaceRangeWith(start, end, [
+    state.schema.nodes.horizontal_rule.create(),
+    state.schema.nodes.paragraph.create(),
+  ]);
+  tr.setSelection(TextSelection.create(tr.doc, start + 1));
+  return tr;
+}
diff --git a/spec/system/composer/prosemirror_editor_spec.rb b/spec/system/composer/prosemirror_editor_spec.rb
@@ -138,6 +138,13 @@ def open_composer_and_toggle_rich_editor
         text: "foo ± bar… test??? wow!!! x, y– — a–> b←- c→ d← e←> f←→ ™ ¶",
       )
     end
+
+    it "supports ---, *** or ___ to create a horizontal rule" do
+      open_composer_and_toggle_rich_editor
+      composer.type_content("Hey\n---\nThere\n*** Friend\n___ ")
+
+      expect(rich).to have_css("hr", count: 3)
+    end
   end
 
   context "with oneboxing" do
