Support read-only mode

Author: petyosi

.changeset/hungry-tigers-speak.md

@@ -0,0 +1,5 @@
+---
+"@mdxeditor/floating-selection-ui-plugin": patch
+---
+
+Support read-only mode

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

@@ -1,5 +1,9 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getSelection } from "lexical";
+import {
+  $getSelection,
+  COMMAND_PRIORITY_LOW,
+  SELECTION_CHANGE_COMMAND,
+} from "lexical";
 import * as Popover from "@radix-ui/react-popover";
 import { useEffect, useState, useRef } from "react";
 import type {
@@ -63,19 +67,21 @@ export function FloatingSelectionUI({
   }, [editor, shouldShow]);
 
   useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
         const selection = $getSelection();
 
+        console.log("SELECTION_CHANGE_COMMAND received", selection);
         if (!selection || selection.isCollapsed()) {
           setSelectionRect(null);
           setIsVisible(false);
-          return;
+          return false;
         }
 
         const rect = getSelectionRectangle(editor);
         if (!rect) {
-          return;
+          return false;
         }
 
         setSelectionRect(rect);
@@ -84,8 +90,10 @@ export function FloatingSelectionUI({
           const show = shouldShow ? shouldShow(editor) : true;
           setIsVisible(show);
         }
-      });
-    });
+        return false;
+      },
+      COMMAND_PRIORITY_LOW,
+    );
   }, [editor, shouldShow]);
 
   useEffect(() => {

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

@@ -24,6 +24,7 @@ export const GetSelectionAsMarkdown: Story = () => {
     <div className="App" style={{ padding: "2rem" }}>
       <div style={{ marginTop: "2rem" }}>
         <MDXEditor
+          readOnly
           ref={mdxEditorRef}
           markdown={`# Welcome to MDXEditor
 

packages/floating-selection-ui-plugin/src/utils/lexicalHelpers.ts

@@ -15,8 +15,7 @@ export function getSelectionRectangle(editor: LexicalEditor) {
     selection !== null &&
     nativeSelection !== null &&
     rootElement !== null &&
-    rootElement.contains(nativeSelection.anchorNode) &&
-    editor.isEditable()
+    rootElement.contains(nativeSelection.anchorNode)
   ) {
     const domRange = nativeSelection.getRangeAt(0);
     let rect;