[WIKI-710] [WIKI-717] fix: slash commands and mentions in comments

packages/editor/src/core/extensions/mentions/utils.ts

@@ -19,28 +19,25 @@ export const renderMentionsDropdown =
     return {
       onStart: (props) => {
         if (!searchCallback) return;
-        if (!props.clientRect) return;
         component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, {
           props: {
             ...props,
             searchCallback,
           },
           editor: props.editor,
         });
+        if (!props.clientRect) return;
         props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
         const element = component.element as HTMLElement;
         element.style.position = "absolute";
         element.style.zIndex = "100";
-
-        document.body.appendChild(element);
         updateFloatingUIFloaterPosition(props.editor, element);
       },
       onUpdate: (props) => {
-        component?.updateProps(props);
+        if (!component || !component.element) return;
+        component.updateProps(props);
         if (!props.clientRect) return;
-        if (component?.element) {
-          updateFloatingUIFloaterPosition(props.editor, component?.element as HTMLElement);
-        }
+        updateFloatingUIFloaterPosition(props.editor, component.element);
       },
       onKeyDown: ({ event }) => {
         if (event.key === "Escape") {

packages/editor/src/core/extensions/slash-commands/root.tsx

@@ -54,33 +54,22 @@ const Command = Extension.create<SlashCommandOptions>({
           return {
             onStart: (props) => {
               // Track active dropdown
-              props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
               component = new ReactRenderer<CommandListInstance, SlashCommandsMenuProps>(SlashCommandsMenu, {
                 props,
                 editor: props.editor,
               });
-
-              if (!props.clientRect) {
-                return;
-              }
-
+              if (!props.clientRect) return;
+              props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
               const element = component.element as HTMLElement;
               element.style.position = "absolute";
               element.style.zIndex = "100";
-              document.body.appendChild(element);
-
               updateFloatingUIFloaterPosition(props.editor, element);
             },
 
             onUpdate: (props) => {
               if (!component || !component.element) return;
-
               component.updateProps(props);
-
-              if (!props.clientRect) {
-                return;
-              }
-
+              if (!props.clientRect) return;
               const element = component.element as HTMLElement;
               updateFloatingUIFloaterPosition(props.editor, element);
             },

packages/editor/src/core/helpers/floating-ui.ts

@@ -11,6 +11,19 @@ export const updateFloatingUIFloaterPosition = (
     strategy?: Strategy;
   }
 ) => {
+  const editorElement = editor.options.element;
+  let container: Element | HTMLElement = document.body;
+
+  if (editorElement instanceof Element) {
+    container = editorElement;
+  } else if (editorElement && typeof editorElement === "object" && "mount" in editorElement) {
+    container = editorElement.mount;
+  } else if (typeof editorElement === "function") {
+    container = document.body;
+  }
+
+  container.appendChild(element);
+
   const virtualElement = {
     getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
   };