Fix floating ui positioning with absolute editors

Fixes #19

Author: petyosi

.changeset/grumpy-lights-run.md

@@ -0,0 +1,5 @@
+---
+"@mdxeditor/floating-selection-ui-plugin": patch
+---
+
+Floating selection UI works with absolutely positioned editor. Fixes #19.

.github/workflows/release.yml

@@ -78,8 +78,6 @@ jobs:
           title: "chore: version packages"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # NPM_TOKEN: Required for initial publish, optional after OIDC is configured
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Auto-merge non-major version PR
         if: steps.changesets.outputs.hasChangesets == 'true' && steps.changesets.outputs.pullRequestNumber != '' && steps.major.outputs.found == 'false'

packages/floating-selection-ui-plugin/src/FloatingSelectionUI.tsx

@@ -11,12 +11,14 @@ import type {
   SelectionRectangle,
 } from "./types";
 import { getSelectionRectangle } from "./utils/lexicalHelpers";
+import { editorRootElementRef$, useCellValue } from "@mdxeditor/editor";
 
 export function FloatingSelectionUI({
   component: Component,
   shouldShow,
 }: FloatingSelectionUIPluginParams) {
   const [editor] = useLexicalComposerContext();
+  const editorRootElementRef = useCellValue(editorRootElementRef$);
   const [selectionRect, setSelectionRect] = useState<SelectionRectangle | null>(
     null,
   );
@@ -131,28 +133,32 @@ export function FloatingSelectionUI({
     <Popover.Root open={isVisible} modal={false}>
       <Popover.Anchor
         style={{
-          position: "absolute",
+          position: "fixed",
           top: `${String(selectionRect.top)}px`,
           left: `${String(selectionRect.left)}px`,
           width: `${String(selectionRect.width)}px`,
           height: `${String(selectionRect.height)}px`,
           pointerEvents: "none",
+          border: "1px solid red",
         }}
       />
-      <Popover.Content
-        side="top"
-        sideOffset={5}
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-        }}
-      >
-        <Component
-          editor={editor}
-          close={() => {
-            setIsVisible(false);
+
+      <Popover.Portal container={editorRootElementRef?.current}>
+        <Popover.Content
+          side="top"
+          sideOffset={5}
+          onOpenAutoFocus={(e) => {
+            e.preventDefault();
           }}
-        />
-      </Popover.Content>
+        >
+          <Component
+            editor={editor}
+            close={() => {
+              setIsVisible(false);
+            }}
+          />
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   );
 }

packages/floating-selection-ui-plugin/src/examples/basic.stories.tsx

@@ -22,7 +22,25 @@ export const GetSelectionAsMarkdown: Story = () => {
   const mdxEditorRef = React.useRef<MDXEditorMethods>(null);
   return (
     <div className="App" style={{ padding: "2rem" }}>
-      <div style={{ marginTop: "2rem" }}>
+      <h1>Floating Selection UI Plugin Demo</h1>
+      <p>
+        Select text in the editor below to see the floating UI appear above your
+        selection.
+      </p>
+      <p>The button will log the selected text to the console.</p>
+
+      <p>
+        The absoltue position is to ensure the selection works as expected in
+        more complicated cases.
+      </p>
+      <div
+        style={{
+          marginTop: "2rem",
+          position: "absolute",
+          top: "100px",
+          left: "100px",
+        }}
+      >
         <MDXEditor
           readOnly
           ref={mdxEditorRef}