Remove portal

Author: FelixMalfait

packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/DefaultSlashCommands.ts

@@ -30,7 +30,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommandConfig[] = [
     icon: IconPilcrow,
     keywords: [msg`paragraph`, msg`text`, msg`p`],
     getIsActive: (editor) => editor.isActive('paragraph'),
-    getIsVisible: (editor) => editor.can().setParagraph?.() ?? true,
+    getIsVisible: (editor) => editor.can().setParagraph?.() ?? false,
     getOnSelect: (editor, range) => () => {
       return editor.chain().focus().deleteRange(range).setParagraph().run();
     },

packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/SlashCommand.ts

@@ -1,13 +1,13 @@
 import { i18n } from '@lingui/core';
 import { Extension, type Editor, type Range } from '@tiptap/core';
 import Suggestion, { type SuggestionOptions } from '@tiptap/suggestion';
+import { type IconComponent } from 'twenty-ui/display';
 
 import {
   DEFAULT_SLASH_COMMANDS,
   type SlashCommandConfig,
 } from '@/advanced-text-editor/extensions/slash-command/DefaultSlashCommands';
 import { SlashCommandRenderer } from '@/advanced-text-editor/extensions/slash-command/SlashCommandRenderer';
-import { type IconComponent } from 'twenty-ui/display';
 
 export type SlashCommandItem = {
   id: string;

packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/SlashCommandMenu.tsx

@@ -1,8 +1,3 @@
-import { type SlashCommandItem } from '@/advanced-text-editor/extensions/slash-command/SlashCommand';
-import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
-import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { ThemeProvider } from '@emotion/react';
 import {
   autoUpdate,
@@ -22,10 +17,15 @@ import {
   useRef,
   useState,
 } from 'react';
-import { createPortal } from 'react-dom';
 import { MenuItemSuggestion } from 'twenty-ui/navigation';
 import { THEME_DARK, THEME_LIGHT } from 'twenty-ui/theme';
 
+import { type SlashCommandItem } from '@/advanced-text-editor/extensions/slash-command/SlashCommand';
+import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
+
 export type SlashCommandMenuProps = {
   items: SlashCommandItem[];
   onSelect: (item: SlashCommandItem) => void;
@@ -172,54 +172,49 @@ export const SlashCommandMenu = forwardRef<unknown, SlashCommandMenuProps>(
     }, [selectedIndex]);
 
     return (
-      <>
-        {createPortal(
-          <ThemeProvider theme={theme}>
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.1 }}
-              data-slash-command-menu
-            >
-              <OverlayContainer
-                ref={refs.setFloating}
-                style={{
-                  ...floatingStyles,
-                  zIndex: RootStackingContextZIndices.DropdownPortalAboveModal,
-                }}
-              >
-                <DropdownContent ref={commandListContainerRef}>
-                  <DropdownMenuItemsContainer hasMaxHeight>
-                    {items.map((item, index) => {
-                      const isSelected = index === selectedIndex;
-
-                      return (
-                        <div
-                          key={item.id}
-                          ref={isSelected ? activeCommandRef : null}
-                          onMouseDown={(e) => {
-                            e.preventDefault();
-                          }}
-                        >
-                          <MenuItemSuggestion
-                            LeftIcon={item.icon}
-                            text={item.title}
-                            selected={isSelected}
-                            onClick={() => {
-                              onSelect(item);
-                            }}
-                          />
-                        </div>
-                      );
-                    })}
-                  </DropdownMenuItemsContainer>
-                </DropdownContent>
-              </OverlayContainer>
-            </motion.div>
-          </ThemeProvider>,
-          document.body,
-        )}
-      </>
+      <ThemeProvider theme={theme}>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.1 }}
+          data-slash-command-menu
+        >
+          <OverlayContainer
+            ref={refs.setFloating}
+            style={{
+              ...floatingStyles,
+              zIndex: RootStackingContextZIndices.DropdownPortalAboveModal,
+            }}
+          >
+            <DropdownContent ref={commandListContainerRef}>
+              <DropdownMenuItemsContainer hasMaxHeight>
+                {items.map((item, index) => {
+                  const isSelected = index === selectedIndex;
+
+                  return (
+                    <div
+                      key={item.id}
+                      ref={isSelected ? activeCommandRef : null}
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                      }}
+                    >
+                      <MenuItemSuggestion
+                        LeftIcon={item.icon}
+                        text={item.title}
+                        selected={isSelected}
+                        onClick={() => {
+                          onSelect(item);
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+              </DropdownMenuItemsContainer>
+            </DropdownContent>
+          </OverlayContainer>
+        </motion.div>
+      </ThemeProvider>
     );
   },
 );