fix: FindAndReplace does not update to reflect changing between readOnly/editable

app/editor/extensions/FindAndReplace.tsx

@@ -4,7 +4,7 @@ import { Command, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import * as React from "react";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
-import Extension from "@shared/editor/lib/Extension";
+import Extension, { WidgetProps } from "@shared/editor/lib/Extension";
 import FindAndReplace from "../components/FindAndReplace";
 
 const pluginKey = new PluginKey("find-and-replace");
@@ -294,8 +294,8 @@ export default class FindAndReplaceExtension extends Extension {
     ];
   }
 
-  public widget = () => (
-    <FindAndReplace readOnly={this.editor.props.readOnly} />
+  public widget = ({ readOnly }: WidgetProps) => (
+    <FindAndReplace readOnly={readOnly} />
   );
 
   private results: { from: number; to: number }[] = [];

app/editor/index.tsx

@@ -763,7 +763,7 @@ export class Editor extends React.PureComponent<
             )}
             {this.widgets &&
               Object.values(this.widgets).map((Widget, index) => (
-                <Widget key={String(index)} rtl={isRTL} />
+                <Widget key={String(index)} rtl={isRTL} readOnly={readOnly} />
               ))}
           </Flex>
         </EditorContext.Provider>

shared/editor/lib/Extension.ts

@@ -7,7 +7,7 @@ import { Editor } from "../../../app/editor";
 
 export type CommandFactory = (attrs?: Record<string, Primitive>) => Command;
 
-export type WidgetProps = { rtl: boolean };
+export type WidgetProps = { rtl: boolean; readOnly: boolean | undefined };
 
 export default class Extension {
   options: any;

shared/editor/lib/ExtensionManager.ts

@@ -44,7 +44,7 @@ export default class ExtensionManager {
 
   get widgets() {
     return this.extensions
-      .filter((extension) => extension.widget({ rtl: false }))
+      .filter((extension) => extension.widget({ rtl: false, readOnly: false }))
       .reduce(
         (nodes, node: Node) => ({
           ...nodes,