feat: add slash command to insert remirror table

ui/src/App.css

@@ -95,3 +95,30 @@
 .remirror-editor.ProseMirror {
   overflow-y: hidden !important;
 }
+
+
+.mention {
+  background: #7963d266;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.remirror-theme {
+  /* Provide sufficient space to see the popup */
+  --rmr-space-6: 400px;
+}
+.suggestions {
+  border: 1px solid darkgray;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+}
+.suggestion {
+  padding: 2px 8px;
+}
+.highlighted {
+  background: #7963d233;
+}
+.hovered {
+  background: #7963d222;
+}

ui/src/components/nodes/Rich.tsx

@@ -58,6 +58,8 @@ import {
   ImageExtension,
   ItalicExtension,
   LinkExtension,
+  MentionExtension,
+  MentionExtensionAttributes,
   PlaceholderExtension,
   ShortcutHandlerProps,
   SubExtension,
@@ -95,14 +97,15 @@ import {
   useAttrs,
   useUpdateReason,
   FloatingWrapper,
+  useMention,
 } from "@remirror/react";
 import { WysiwygEditor } from "@remirror/react-editors/wysiwyg";
 import { FloatingToolbar, useExtensionEvent } from "@remirror/react";
 import { TableExtension } from "@remirror/extension-react-tables";
 import { GenIcon, IconBase } from "@remirror/react-components";
 import "remirror/styles/all.css";
 
-import { ProsemirrorPlugin, htmlToProsemirrorNode } from "remirror";
+import { ProsemirrorPlugin, cx, htmlToProsemirrorNode } from "remirror";
 import { styled } from "@mui/material";
 
 import { MyYjsExtension } from "./YjsRemirror";
@@ -371,6 +374,92 @@ export const SetHighlightButton: React.FC<
   );
 };
 
+/**
+ * Build a slash command using Remirror's MentionExtension.
+ */
+
+function UserSuggestor({
+  allUsers,
+}: {
+  allUsers: MentionExtensionAttributes[];
+}): JSX.Element {
+  const [users, setUsers] = useState<MentionExtensionAttributes[]>([]);
+  const { createTable } = useCommands();
+  const { state, getMenuProps, getItemProps, indexIsHovered, indexIsSelected } =
+    useMention({
+      items: users,
+
+      onExit: (props, command) => {
+        console.log("props", props);
+        // console.log("command", command);
+        // get the command
+        const { query } = props;
+        const { full } = query;
+        switch (full) {
+          case "table":
+            // insert table
+            console.log("Inserting table ..");
+            createTable({
+              rowsCount: 3,
+              columnsCount: 3,
+              withHeaderRow: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    });
+
+  useEffect(() => {
+    if (!state) {
+      return;
+    }
+
+    const searchTerm = state.query.full.toLowerCase();
+    const filteredUsers = allUsers
+      .filter((user) => user.label.toLowerCase().includes(searchTerm))
+      .sort()
+      .slice(0, 5);
+    setUsers(filteredUsers);
+  }, [state, allUsers]);
+
+  const enabled = !!state;
+
+  return (
+    <FloatingWrapper
+      positioner="cursor"
+      enabled={enabled}
+      placement="bottom-start"
+    >
+      <div {...getMenuProps()} className="suggestions">
+        {enabled &&
+          users.map((user, index) => {
+            const isHighlighted = indexIsSelected(index);
+            const isHovered = indexIsHovered(index);
+
+            return (
+              <div
+                key={user.id}
+                className={cx(
+                  "suggestion",
+                  isHighlighted && "highlighted",
+                  isHovered && "hovered"
+                )}
+                {...getItemProps({
+                  item: user,
+                  index,
+                })}
+              >
+                {user.label}
+              </div>
+            );
+          })}
+      </div>
+    </FloatingWrapper>
+  );
+}
+
 const MyStyledWrapper = styled("div")(
   () => `
   .remirror-editor-wrapper {
@@ -421,6 +510,12 @@ const MyEditor = ({
       new ImageExtension({ enableResizing: true }),
       new DropCursorExtension(),
       new MyYjsExtension({ getProvider: () => provider, id }),
+      new MentionExtension({
+        extraAttributes: { type: "user" },
+        matchers: [
+          { name: "slash", char: "/", appendText: " ", matchOffset: 0 },
+        ],
+      }),
       // new CalloutExtension({ defaultType: "warn" }),
       ...wysiwygPreset(),
     ],
@@ -478,6 +573,15 @@ const MyEditor = ({
             <EditorComponent />
 
             <TableComponents />
+            <UserSuggestor
+              allUsers={[
+                { id: "table", label: "table" },
+                // { id: "sue", label: "Sue" },
+                // { id: "pat", label: "Pat" },
+                // { id: "tom", label: "Tom" },
+                // { id: "jim", label: "Jim" },
+              ]}
+            />
 
             {!isGuest && (
               <FloatingLinkToolbar>
@@ -493,7 +597,6 @@ const MyEditor = ({
                   <SetHighlightButton color="lightcyan" />
                   <SetHighlightButton />
                 </CommandButtonGroup>
-                <VerticalDivider />
                 {/* <FormattingButtonGroup /> */}
                 {/* <DecreaseIndentButton /> */}
                 {/* <IncreaseIndentButton /> */}