Add "Create a nested doc" to @mention (#11800)

* Mention menu nested doc

* refactor

app/editor/components/MentionMenu.tsx

@@ -1,7 +1,12 @@
 import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
 import { v4 as uuidv4 } from "uuid";
-import { DocumentIcon, PlusIcon, CollectionIcon } from "outline-icons";
+import {
+  DocumentIcon,
+  PlusIcon,
+  NewDocumentIcon,
+  CollectionIcon,
+} from "outline-icons";
 import { useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
@@ -227,6 +232,24 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
               label: search,
             },
           } as MentionItem,
+          {
+            name: "link",
+            icon: <NewDocumentIcon />,
+            title: search?.trim(),
+            section: DocumentsSection,
+            subtitle: t("Create a nested doc"),
+            visible: !!search && !isEmail(search) && !!documentId,
+            priority: -2,
+            appendSpace: true,
+            attrs: {
+              id: uuidv4(),
+              type: MentionType.Document,
+              modelId: uuidv4(),
+              actorId,
+              label: search,
+              nested: true,
+            },
+          } as MentionItem,
         ])
     : [];
 

app/editor/components/SuggestionsMenu.tsx

@@ -245,10 +245,13 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
             ...item,
             name: "mention",
           });
-          void editorProps.onCreateLink?.({
-            title: item.attrs.label,
-            id: item.attrs.modelId,
-          });
+          void editorProps.onCreateLink?.(
+            {
+              title: item.attrs.label,
+              id: item.attrs.modelId,
+            },
+            !!item.attrs.nested
+          );
           return;
         case "image":
           return triggerFilePick(

app/editor/index.tsx

@@ -133,7 +133,10 @@ export type Props = {
   /** Callback when file upload progress changes */
   onFileUploadProgress?: (id: string, fractionComplete: number) => void;
   /** Callback when a link is created, should return url to created document */
-  onCreateLink?: (params: Properties<Document>) => Promise<string>;
+  onCreateLink?: (
+    params: Properties<Document>,
+    nested?: boolean
+  ) => Promise<string>;
   /** Callback when user clicks on any link in the document */
   onClickLink: (
     href: string,

shared/i18n/locales/en_US/translation.json

@@ -553,6 +553,7 @@
   "Height": "Height",
   "Profile picture": "Profile picture",
   "Create a new doc": "Create a new doc",
+  "Create a nested doc": "Create a nested doc",
   "{{ userName }} won't be notified, as they do not have access to this document": "{{ userName }} won't be notified, as they do not have access to this document",
   "Members of \"{{ groupName }}\" that have access to this document will be notified": "Members of \"{{ groupName }}\" that have access to this document will be notified",
   "Keep as link": "Keep as link",