FEATURE: Tight lists by default on rich composer (#31969)

Tight lists are lists that look like this:

* Item 1
* Item 2
* Item 3

Loose lists look like this:

* Item 1

* Item 2

* Item 3

There is a place for the latter, but the former is more
common default behaviour for writing apps and widgets, so
we are overriding the prosemirror default to use tight lists.

Eventually we will have a shortcut or other special behaviour
to switch between the list styles.

app/assets/javascripts/discourse/app/static/prosemirror/extensions/bullet-list.js

@@ -0,0 +1,15 @@
+import { schema } from "prosemirror-markdown";
+
+/** @type {RichEditorExtension} */
+const extension = {
+  nodeSpec: {
+    bullet_list: {
+      ...schema.nodes.bullet_list.spec,
+
+      // All we are doing here is overriding the tight list default to `true`.
+      attrs: { tight: { default: true } },
+    },
+  },
+};
+
+export default extension;

app/assets/javascripts/discourse/app/static/prosemirror/extensions/ordered-list.js

@@ -0,0 +1,15 @@
+import { schema } from "prosemirror-markdown";
+
+/** @type {RichEditorExtension} */
+const extension = {
+  nodeSpec: {
+    ordered_list: {
+      ...schema.nodes.ordered_list.spec,
+
+      // All we are doing here is overriding the tight list default to `true`.
+      attrs: { order: { default: 1 }, tight: { default: true } },
+    },
+  },
+};
+
+export default extension;

app/assets/javascripts/discourse/app/static/prosemirror/extensions/register-default.js

@@ -1,4 +1,5 @@
 import { registerRichEditorExtension } from "discourse/lib/composer/rich-editor-extensions";
+import bulletList from "./bullet-list";
 import codeBlock from "./code-block";
 import emoji from "./emoji";
 import hashtag from "./hashtag";
@@ -10,6 +11,7 @@ import link from "./link";
 import markdownPaste from "./markdown-paste";
 import mention from "./mention";
 import onebox from "./onebox";
+import orderedList from "./ordered-list";
 import quote from "./quote";
 import strikethrough from "./strikethrough";
 import table from "./table";
@@ -41,6 +43,8 @@ const defaultExtensions = [
   typographerReplacements,
   table,
   markdownPaste,
+  orderedList,
+  bulletList,
 ];
 
 defaultExtensions.forEach(registerRichEditorExtension);

spec/system/composer/prosemirror_editor_spec.rb

@@ -94,6 +94,14 @@ describe "Composer - ProseMirror editor", type: :system do
       expect(rich).to have_css("ul ul li", count: 3)
     end
 
+    it "uses 'tight' lists for both ordered and unordered lists by default" do
+      open_composer_and_toggle_rich_editor
+      composer.type_content("1. Item 1\n5. Item 2\n\n")
+      composer.type_content("* Item 1\n* Item 2")
+      expect(rich).to have_css("ol[data-tight='true']")
+      expect(rich).to have_css("ul[data-tight='true']")
+    end
+
     it "supports ``` or 4 spaces to create a code block" do
       open_composer_and_toggle_rich_editor
       composer.type_content("```\nThis is a code block")