feat: comment editor emoji picker and ctrl+enter action (#1121)

* commenteditor-emoji-picker

* capture Mac command key
* remove tooltip

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>

apps/client/src/features/comment/components/comment-actions.tsx

@@ -1,4 +1,4 @@
-import { Button, Group } from "@mantine/core";
+import { Button, Group, Tooltip } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 type CommentActionsProps = {
@@ -15,7 +15,7 @@ function CommentActions({
   isCommentEditor,
 }: CommentActionsProps) {
   const { t } = useTranslation();
-  
+
   return (
     <Group justify="flex-end" pt="sm" wrap="nowrap">
       {isCommentEditor && (

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -124,6 +124,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
 
         <CommentEditor
           onUpdate={handleCommentEditorChange}
+          onSave={handleAddComment}
           placeholder={t("Write a comment")}
           editable={true}
           autofocus={true}

apps/client/src/features/comment/components/comment-editor.tsx

@@ -8,10 +8,12 @@ import { useFocusWithin } from "@mantine/hooks";
 import clsx from "clsx";
 import { forwardRef, useEffect, useImperativeHandle } from "react";
 import { useTranslation } from "react-i18next";
+import EmojiCommand from "@/features/editor/extensions/emoji-command";
 
 interface CommentEditorProps {
   defaultContent?: any;
   onUpdate?: any;
+  onSave?: any;
   editable: boolean;
   placeholder?: string;
   autofocus?: boolean;
@@ -22,6 +24,7 @@ const CommentEditor = forwardRef(
     {
       defaultContent,
       onUpdate,
+      onSave,
       editable,
       placeholder,
       autofocus,
@@ -42,7 +45,35 @@ const CommentEditor = forwardRef(
         }),
         Underline,
         Link,
+        EmojiCommand,
       ],
+      editorProps: {
+        handleDOMEvents: {
+          keydown: (_view, event) => {
+            if (
+              [
+                "ArrowUp",
+                "ArrowDown",
+                "ArrowLeft",
+                "ArrowRight",
+                "Enter",
+              ].includes(event.key)
+            ) {
+              const emojiCommand = document.querySelector("#emoji-command");
+              if (emojiCommand) {
+                return true;
+              }
+            }
+
+            if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+              event.preventDefault();
+              if (onSave) onSave();
+
+              return true;
+            }
+          },
+        },
+      },
       onUpdate({ editor }) {
         if (onUpdate) onUpdate(editor.getJSON());
       },

apps/client/src/features/comment/components/comment-list-item.tsx

@@ -140,6 +140,7 @@ function CommentListItem({ comment, pageId }: CommentListItemProps) {
               defaultContent={content}
               editable={true}
               onUpdate={(newContent: any) => setContent(newContent)}
+              onSave={handleUpdateComment}
               autofocus={true}
             />
 

apps/client/src/features/comment/components/comment-list.tsx

@@ -151,6 +151,7 @@ const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
       <CommentEditor
         ref={commentEditorRef}
         onUpdate={setContent}
+        onSave={handleSave}
         editable={true}
       />
       {focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}

apps/client/src/features/comment/components/comment.module.css

@@ -17,17 +17,19 @@
 .commentEditor {
 
     .focused {
+        border-radius: var(--mantine-radius-sm);
         box-shadow: 0 0 0 2px var(--mantine-color-blue-3);
     }
 
     .ProseMirror :global(.ProseMirror){
+        border-radius: var(--mantine-radius-sm);
         max-width: 100%;
         white-space: pre-wrap;
         word-break: break-word;
         max-height: 20vh;
         padding-left: 6px;
         padding-right: 6px;
-        margin-top: 2px;
+        margin-top: 10px;
         margin-bottom: 2px;
         overflow: hidden auto;
     }

apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts

@@ -33,7 +33,7 @@ const renderEmojiItems = () => {
         showOnCreate: true,
         interactive: true,
         trigger: "manual",
-        placement: "bottom-start",
+        placement: "bottom",
       });
     },
     onStart: (props: {

apps/client/src/features/editor/components/mention/mention-list.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -18,7 +19,7 @@ import {
 import clsx from "clsx";
 import classes from "./mention.module.css";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import { IconFileDescription } from "@tabler/icons-react";
+import { IconFileDescription, IconPlus } from "@tabler/icons-react";
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
 import { useParams } from "react-router-dom";
 import { v7 as uuid7 } from "uuid";
@@ -28,14 +29,28 @@ import {
   MentionListProps,
   MentionSuggestionItem,
 } from "@/features/editor/components/mention/mention.type.ts";
+import { IPage } from "@/features/page/types/page.types";
+import { useCreatePageMutation, usePageQuery } from "@/features/page/queries/page-query";
+import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
+import { SimpleTree } from "react-arborist";
+import { SpaceTreeNode } from "@/features/page/tree/types";
+import { useTranslation } from "react-i18next";
+import { useQueryEmit } from "@/features/websocket/use-query-emit";
+import { extractPageSlugId } from "@/lib";
 
 const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(1);
   const viewportRef = useRef<HTMLDivElement>(null);
-  const { spaceSlug } = useParams();
+  const { pageSlug, spaceSlug } = useParams();
+  const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
   const { data: space } = useSpaceQuery(spaceSlug);
   const [currentUser] = useAtom(currentUserAtom);
   const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
+  const { t } = useTranslation();
+  const [data, setData] = useAtom(treeDataAtom);
+  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
+  const createPageMutation = useCreatePageMutation();
+  const emit = useQueryEmit();
 
   const { data: suggestion, isLoading } = useSearchSuggestionsQuery({
     query: props.query,
@@ -45,12 +60,23 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     limit: 10,
   });
 
+  const createPageItem = (label: string) : MentionSuggestionItem => {
+    return {
+      id: null,
+      label: label,
+      entityType: "page",
+      entityId: null,
+      slugId: null,
+      icon: null,
+    }
+  }
+
   useEffect(() => {
     if (suggestion && !isLoading) {
       let items: MentionSuggestionItem[] = [];
 
       if (suggestion?.users?.length > 0) {
-        items.push({ entityType: "header", label: "Users" });
+        items.push({ entityType: "header", label: t("Users") });
 
         items = items.concat(
           suggestion.users.map((user) => ({
@@ -64,7 +90,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
       }
 
       if (suggestion?.pages?.length > 0) {
-        items.push({ entityType: "header", label: "Pages" });
+        items.push({ entityType: "header", label: t("Pages") });
         items = items.concat(
           suggestion.pages.map((page) => ({
             id: uuid7(),
@@ -76,6 +102,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           })),
         );
       }
+      items.push(createPageItem(props.query));
 
       setRenderItems(items);
       // update editor storage
@@ -96,7 +123,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
             creatorId: currentUser?.user.id,
           });
         }
-        if (item.entityType === "page") {
+        if (item.entityType === "page" && item.id!==null) {
           props.command({
             id: item.id,
             label: item.label || "Untitled",
@@ -106,6 +133,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
             creatorId: currentUser?.user.id,
           });
         }
+        if (item.entityType === "page" && item.id===null) {
+          createPage(item.label);
+        }
       }
     },
     [renderItems],
@@ -167,6 +197,58 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     },
   }));
 
+  const createPage = async (title: string) => {
+    const payload: { spaceId: string; parentPageId?: string; title: string } = {
+      spaceId: space.id,
+      parentPageId: page.id || null,
+      title: title
+    };
+    
+    let createdPage: IPage;
+    try {
+      createdPage = await createPageMutation.mutateAsync(payload);
+      const parentId = page.id || null;
+      const data = {
+        id: createdPage.id,
+        slugId: createdPage.slugId,
+        name: createdPage.title,
+        position: createdPage.position,
+        spaceId: createdPage.spaceId,
+        parentPageId: createdPage.parentPageId,
+        children: [],
+      } as any;
+
+      const lastIndex = tree.data.length;
+
+      tree.create({ parentId, index: lastIndex, data });
+      setData(tree.data);
+
+      props.command({
+        id: uuid7(),
+        label:  createdPage.title || "Untitled",
+        entityType: "page",
+        entityId: createdPage.id,
+        slugId: createdPage.slugId,
+        creatorId: currentUser?.user.id,
+      });
+
+      setTimeout(() => {
+      emit({
+        operation: "addTreeNode",
+        spaceId: space.id,
+        payload: {
+          parentId,
+          index: lastIndex,
+          data,
+        },
+      });
+    }, 50);
+
+    } catch (err) {
+      throw new Error("Failed to create page");
+    }
+  }
+
   // if no results and enter what to do?
 
   useEffect(() => {
@@ -178,7 +260,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   if (renderItems.length === 0) {
     return (
       <Paper shadow="md" p="xs" withBorder>
-        No results
+        { t("No results") }
       </Paper>
     );
   }
@@ -248,14 +330,14 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                         color="gray"
                         size={18}
                       >
-                        <IconFileDescription size={18} />
+                        { (item.id) ? <IconFileDescription size={18} /> : <IconPlus size={18} /> }
                       </ActionIcon>
                     )}
                   </ActionIcon>
 
                   <div style={{ flex: 1 }}>
                     <Text size="sm" fw={500}>
-                      {item.label}
+                      { (item.id) ? item.label : t("Create page") + ': ' + item.label }
                     </Text>
                   </div>
                 </Group>