feat: Add input rule to create new tables (#9118)

app/editor/extensions/SmartText.ts

@@ -2,7 +2,8 @@ import Extension from "@shared/editor/lib/Extension";
 import { InputRule } from "@shared/editor/lib/InputRule";
 
 const rightArrow = new InputRule(/->$/, "→");
-const emdash = new InputRule(/--$/, "—");
+// Note that the suppression of pipe here prevents conflict with table creation rule.
+const emdash = new InputRule(/(?:^|[^\|])(--)$/, "—");
 const oneHalf = new InputRule(/(?:^|\s)(1\/2)$/, "½");
 const threeQuarters = new InputRule(/(?:^|\s)(3\/4)$/, "¾");
 const copyright = new InputRule(/\(c\)$/, "©️");

shared/editor/commands/table.ts

@@ -44,11 +44,11 @@ export function createTable({
   };
 }
 
-function createTableInner(
+export function createTableInner(
   state: EditorState,
   rowsCount: number,
   colsCount: number,
-  colWidth: number,
+  colWidth?: number,
   withHeaderRow = true,
   cellContent?: Node
 ) {

shared/editor/nodes/Table.ts

@@ -1,5 +1,7 @@
 import { chainCommands } from "prosemirror-commands";
+import { InputRule } from "prosemirror-inputrules";
 import { NodeSpec, Node as ProsemirrorNode } from "prosemirror-model";
+import { TextSelection } from "prosemirror-state";
 import {
   addColumnAfter,
   addRowAfter,
@@ -23,6 +25,7 @@ import {
   deleteColSelection,
   deleteRowSelection,
   moveOutOfTable,
+  createTableInner,
 } from "../commands/table";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import { FixTablesPlugin } from "../plugins/FixTables";
@@ -101,6 +104,18 @@ export default class Table extends Node {
     };
   }
 
+  inputRules() {
+    return [
+      new InputRule(/^(\|--)$/, (state, _, start, end) => {
+        const nodes = createTableInner(state, 2, 2);
+        const tr = state.tr.replaceWith(start - 1, end, nodes).scrollIntoView();
+        const resolvedPos = tr.doc.resolve(start + 1);
+        tr.setSelection(TextSelection.near(resolvedPos));
+        return tr;
+      }),
+    ];
+  }
+
   toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) {
     state.renderTable(node);
     state.closeBlock(node);