Feat/markdown editor

package.json

@@ -19,6 +19,7 @@
     "db:fetch-issues": "set -a; . ./.env.local; set +a && tsx --tsconfig ./tsconfig.script.json ./scripts/fetchIssues.ts"
   },
   "dependencies": {
+    "@ariakit/react": "^0.4.1",
     "@headlessui/react": "^1.7.17",
     "@mdx-js/mdx": "^3.0.0",
     "@neshca/cache-handler": "^0.6.2",
@@ -32,6 +33,7 @@
     "@rsc-cache/next": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.6.1",
     "@tanstack/react-query": "^5.0.0",
+    "@types/textarea-caret": "^3.0.3",
     "bright": "^0.8.4",
     "client-only": "^0.0.1",
     "cmdk": "^0.2.0",
@@ -63,6 +65,7 @@
     "sharp": "^0.32.5",
     "tailwind-merge": "^1.14.0",
     "text-field-edit": "^4.0.0",
+    "textarea-caret": "^3.1.0",
     "vfile": "^6.0.1",
     "zod": "^3.22.2",
     "zod-form-data": "^2.0.1",

src/actions/issue.action.tsx

@@ -13,7 +13,6 @@ import { issueSearchListOutputValidator } from "~/models/dto/issue-search-output
 import { searchIssues } from "~/models/issues/search";
 
 import { getAuthedUser } from "./auth.action";
-import { cache } from "react";
 
 import type { IssueSearchFilters } from "~/lib/shared/utils.shared";
 import { IssueHoverCardContents } from "~/components/hovercard/issue-hovercard-contents";

src/actions/markdown.action.tsx

@@ -1,13 +1,8 @@
 "use server";
 
-import { Markdown } from "~/components/markdown/markdown";
-import { renderRSCtoString } from "~/components/custom-rsc-renderer/render-rsc-to-string";
-
-export async function getMarkdownPreview(
-  content: string,
-  repositoryPath: `${string}/${string}`
-) {
-  return await renderRSCtoString(
-    <Markdown content={content} repository={repositoryPath} />
-  );
+export async function getIssueNumbersStartingWithNumber(issueNo: number) {
+  // ...
+}
+export async function getUserMentionsByUsername(username: string) {
+  // ...
 }

src/components/button.tsx

@@ -66,7 +66,9 @@ export const Button = React.forwardRef<
   // we check disabled here because we want to apply a different styling
   const isDisabled =
     ("disabled" in restProps && restProps["disabled"] === true) ||
-    ("aria-disabled" in restProps && restProps["aria-disabled"] === true);
+    ("aria-disabled" in restProps &&
+      (restProps["aria-disabled"] === true ||
+        restProps["aria-disabled"] === "true"));
 
   const commonClasses = clsx(
     "items-center justify-center gap-2 text-sm",

src/components/markdown-editor/markdown-editor.tsx

@@ -7,6 +7,7 @@ import { MarkdownIcon } from "@primer/octicons-react";
 import { Button } from "~/components/button";
 import { MarkdownEditorPreview } from "~/components/markdown-editor/markdown-editor-preview";
 import { MarkdownEditorToolbar } from "~/components/markdown-editor/markdown-editor-toolbar";
+import * as Ariakit from "@ariakit/react";
 
 // utils
 import { clsx, isValidURL } from "~/lib/shared/utils.shared";
@@ -17,6 +18,7 @@ import { enableTabToIndent } from "indent-textarea";
 
 // types
 import type { TextareaProps } from "~/components/textarea";
+import type { EventFor } from "~/lib/types";
 
 export type MarkdownEditorProps = Omit<TextareaProps, "value"> & {
   renderMarkdownAction: (
@@ -82,7 +84,7 @@ export function MarkdownEditor({
     }
   }, [selectedTab]);
 
-  function pasteLinkToTextarea(text: string) {
+  const pasteLinkToTextarea = React.useCallback((text: string) => {
     const textArea = textAreaRef.current;
     if (textArea && isValidURL(text)) {
       const textContent = textArea.value;
@@ -109,7 +111,28 @@ export function MarkdownEditor({
       }
     }
     return false;
-  }
+  }, []);
+
+  const [textAreaValue, setTextAreaValue] =
+    React.useState(lastSavedTextContent);
+  const [trigger, setTrigger] = React.useState<string | null>(null);
+  const [caretOffset, setCaretOffset] = React.useState<number | null>(null);
+
+  const combobox = Ariakit.useComboboxStore();
+
+  const searchValue = combobox.useState("value");
+  const deferredSearchValue = React.useDeferredValue(searchValue);
+
+  // Re-calculates the position of the combobox popover in case the changes on
+  // the textarea value have shifted the trigger character.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(combobox.render, [combobox, textAreaValue]);
+
+  const onKeyDown = (event: EventFor<"textarea", "onKeyDown">) => {
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      combobox.hide();
+    }
+  };
 
   return (
     <>
@@ -182,31 +205,57 @@ export function MarkdownEditor({
             </Tabs.List>
 
             <div className="p-2 bg-backdrop rounded-b-md">
-              <Tabs.Content value={TABS.EDITOR} asChild>
-                <Textarea
-                  rows={12}
-                  {...props}
-                  defaultValue={lastSavedTextContent}
-                  label={label}
-                  onPaste={(ev) => {
-                    const isEventHandled = pasteLinkToTextarea(
-                      ev.clipboardData.getData("text/plain")
-                    );
+              <Tabs.Content value={TABS.EDITOR}>
+                <Ariakit.Combobox
+                  store={combobox}
+                  autoSelect
+                  value={textAreaValue}
+                  // We'll overwrite how the combobox popover is shown, so we disable
+                  // the default behaviors.
+                  showOnClick={false}
+                  showOnChange={false}
+                  showOnKeyPress={false}
+                  // To the combobox state, we'll only set the value after the trigger
+                  // character (the search value), so we disable the default behavior.
+                  setValueOnChange={false}
+                  className="combobox"
+                  render={
+                    <Textarea
+                      rows={12}
+                      {...props}
+                      defaultValue={lastSavedTextContent}
+                      value={textAreaValue}
+                      onChange={(e) => setTextAreaValue(e.currentTarget.value)}
+                      // onChange={onChange}
+                      onKeyDown={onKeyDown}
+                      label={label}
+                      // We need to re-calculate the position of the combobox popover
+                      // when the textarea contents are scrolled.
+                      onScroll={combobox.render}
+                      // Hide the combobox popover whenever the selection changes.
+                      onPointerDown={combobox.hide}
+                      onPaste={(ev) => {
+                        const isEventHandled = pasteLinkToTextarea(
+                          ev.clipboardData.getData("text/plain")
+                        );
 
-                    if (isEventHandled) ev.preventDefault();
-                  }}
-                  className="text-sm"
-                  name={selectedTab === "EDITOR" ? props.name : ""}
-                  hideLabel
-                  ref={(ref) => {
-                    textAreaRef.current = ref;
-                    if (ref) {
-                      enableTabToIndent(ref);
-                    }
-                  }}
-                  style={{
-                    height: textAreaHeight > 0 ? `${textAreaHeight}px` : "auto"
-                  }}
+                        if (isEventHandled) ev.preventDefault();
+                      }}
+                      className="text-sm"
+                      name={selectedTab === "EDITOR" ? props.name : ""}
+                      hideLabel
+                      ref={(ref) => {
+                        textAreaRef.current = ref;
+                        if (ref) {
+                          enableTabToIndent(ref);
+                        }
+                      }}
+                      style={{
+                        height:
+                          textAreaHeight > 0 ? `${textAreaHeight}px` : "auto"
+                      }}
+                    />
+                  }
                 />
               </Tabs.Content>
               <Tabs.Content