feat: Add option to 'Create new child doc' from link editor

app/editor/components/LinkEditor.tsx

@@ -35,7 +35,7 @@ type Props = {
   to: number;
   dictionary: Dictionary;
   onRemoveLink?: () => void;
-  onCreateLink?: (title: string) => Promise<void>;
+  onCreateLink?: (title: string, nested?: boolean) => Promise<void>;
   onSearchLink?: (term: string) => Promise<SearchResult[]>;
   onSelectLink: (options: {
     href: string;
@@ -186,7 +186,7 @@ class LinkEditor extends React.Component<Props, State> {
         event.preventDefault();
         event.stopPropagation();
         const { selectedIndex } = this.state;
-        const total = results.length;
+        const total = results.length + 1;
         const nextIndex = selectedIndex + 1;
 
         this.setState({
@@ -243,17 +243,17 @@ class LinkEditor extends React.Component<Props, State> {
     }
   };
 
-  handleCreateLink = async (value: string) => {
+  handleCreateLink = async (title: string, nested?: boolean) => {
     this.discardInputValue = true;
     const { onCreateLink } = this.props;
 
-    value = value.trim();
-    if (value.length === 0) {
+    title = title.trim();
+    if (title.length === 0) {
       return;
     }
 
     if (onCreateLink) {
-      return onCreateLink(value);
+      return onCreateLink(title, nested);
     }
   };
 
@@ -368,22 +368,42 @@ class LinkEditor extends React.Component<Props, State> {
                 ))}
 
                 {showCreateLink && (
-                  <LinkSearchResult
-                    key="create"
-                    containerRef={this.resultsRef}
-                    title={suggestedLinkTitle}
-                    subtitle={dictionary.createNewDoc}
-                    icon={<PlusIcon />}
-                    onPointerMove={() => this.handleFocusLink(results.length)}
-                    onClick={async () => {
-                      await this.handleCreateLink(suggestedLinkTitle);
+                  <>
+                    <LinkSearchResult
+                      key="create"
+                      containerRef={this.resultsRef}
+                      title={suggestedLinkTitle}
+                      subtitle={dictionary.createNewDoc}
+                      icon={<PlusIcon />}
+                      onPointerMove={() => this.handleFocusLink(results.length)}
+                      onClick={async () => {
+                        await this.handleCreateLink(suggestedLinkTitle);
 
-                      if (this.initialSelectionLength) {
-                        this.moveSelectionToEnd();
+                        if (this.initialSelectionLength) {
+                          this.moveSelectionToEnd();
+                        }
+                      }}
+                      selected={results.length === selectedIndex}
+                    />
+                    <LinkSearchResult
+                      key="create-nested"
+                      containerRef={this.resultsRef}
+                      title={suggestedLinkTitle}
+                      subtitle={dictionary.createNewChildDoc}
+                      icon={<PlusIcon />}
+                      onPointerMove={() =>
+                        this.handleFocusLink(results.length + 1)
                       }
-                    }}
-                    selected={results.length === selectedIndex}
-                  />
+                      onClick={async () => {
+                        await this.handleCreateLink(suggestedLinkTitle, true);
+
+                        if (this.initialSelectionLength) {
+                          this.moveSelectionToEnd();
+                        }
+                      }}
+                      selected={results.length + 1 === selectedIndex}
+                    />
+                  </>
                 )}
               </>
             )}

app/editor/components/LinkToolbar.tsx

@@ -52,7 +52,7 @@ export default function LinkToolbar({
   });
 
   const handleOnCreateLink = React.useCallback(
-    async (title: string) => {
+    async (title: string, nested?: boolean) => {
       onClose();
       view.focus();
 
@@ -81,6 +81,7 @@ export default function LinkToolbar({
       );
 
       return createAndInsertLink(view, title, href, {
+        nested,
         onCreateLink,
         dictionary,
       });

app/editor/components/SelectionToolbar.tsx

@@ -148,7 +148,10 @@ export default function SelectionToolbar(props: Props) {
     };
   }, [isActive, previousIsActive, readOnly, view]);
 
-  const handleOnCreateLink = async (title: string): Promise<void> => {
+  const handleOnCreateLink = async (
+    title: string,
+    nested?: boolean
+  ): Promise<void> => {
     const { onCreateLink } = props;
 
     if (!onCreateLink) {
@@ -173,6 +176,7 @@ export default function SelectionToolbar(props: Props) {
     );
 
     return createAndInsertLink(view, title, href, {
+      nested,
       onCreateLink,
       dictionary,
     });