Support configuring the side/align of the plugin

Author: petyosi

.changeset/pretty-crabs-roll.md

@@ -0,0 +1,5 @@
+---
+"@mdxeditor/floating-selection-ui-plugin": minor
+---
+
+Add support for configuring the side and the align of the popup

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

@@ -16,6 +16,8 @@ import { editorRootElementRef$, useCellValue } from "@mdxeditor/editor";
 export function FloatingSelectionUI({
   component: Component,
   shouldShow,
+  side = "top",
+  align = "center",
 }: FloatingSelectionUIPluginParams) {
   const [editor] = useLexicalComposerContext();
   const editorRootElementRef = useCellValue(editorRootElementRef$);
@@ -139,13 +141,13 @@ export function FloatingSelectionUI({
           width: `${String(selectionRect.width)}px`,
           height: `${String(selectionRect.height)}px`,
           pointerEvents: "none",
-          border: "1px solid red",
         }}
       />
 
       <Popover.Portal container={editorRootElementRef?.current}>
         <Popover.Content
-          side="top"
+          side={side}
+          align={align}
           sideOffset={5}
           onOpenAutoFocus={(e) => {
             e.preventDefault();

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

@@ -22,25 +22,22 @@ export const GetSelectionAsMarkdown: Story = () => {
   const mdxEditorRef = React.useRef<MDXEditorMethods>(null);
   return (
     <div className="App" style={{ padding: "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",
-        }}
+        style={{ fontSize: "0.875rem", marginBottom: "1rem", color: "#444" }}
       >
+        <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>
+      <div>
         <MDXEditor
           readOnly
           ref={mdxEditorRef}
@@ -79,6 +76,8 @@ Open your browser console to see the logged selections.`}
                   log current selection as markdown
                 </button>
               ),
+              align: "start",
+              side: "top",
               // Only show when more than 3 characters are selected
               shouldShow: (editor) => {
                 const text = editor.getEditorState().read(() => {

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

@@ -58,6 +58,8 @@ export const floatingSelectionUIPlugin =
           <FloatingSelectionUI
             component={params.component}
             shouldShow={params.shouldShow}
+            side={params.side}
+            align={params.align}
           />
         ),
       });

packages/floating-selection-ui-plugin/src/types.ts

@@ -13,6 +13,18 @@ export interface FloatingSelectionUIPluginParams {
    * @returns true to show UI, false to hide
    */
   shouldShow?: (editor: LexicalEditor) => boolean;
+
+  /**
+   * The side of the selection where the popover should appear
+   * @default 'top'
+   */
+  side?: "top" | "right" | "bottom" | "left";
+
+  /**
+   * The alignment of the popover relative to the selection
+   * @default 'center'
+   */
+  align?: "start" | "center" | "end";
 }
 
 export interface FloatingUIComponentProps {