1 files changed, 33 insertions, 15 deletions

diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 7ce06cf7f..d7e799161 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, override, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { lift, wrapIn } from 'prosemirror-commands';
 import { Mark, MarkType, Node as ProsNode, ResolvedPos } from 'prosemirror-model';
@@ -10,7 +10,7 @@ import { EditorState, NodeSelection, TextSelection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { Doc } from '../../../../fields/Doc';
 import { BoolCast, Cast, StrCast } from '../../../../fields/Types';
-import { numberRange } from '../../../../Utils';
+import { copyProps, numberRange } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
 import { LinkManager } from '../../../util/LinkManager';
 import { SelectionManager } from '../../../util/SelectionManager';
@@ -63,8 +63,12 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     @observable private showLinkDropdown: boolean = false;
 
     _reaction: IReactionDisposer | undefined;
-    constructor(props: Readonly<{}>) {
+    _prevProps: AntimodeMenuProps;
+    @override _props: AntimodeMenuProps;
+    constructor(props: AntimodeMenuProps) {
         super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
         runInAction(() => {
             RichTextMenu.Instance = this;
             this.updateMenu(undefined, undefined, props, this.layoutDoc);
@@ -107,6 +111,9 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         return BoolCast(this.layoutDoc?.layout_centered);
     }
     _disposer: IReactionDisposer | undefined;
+    componentDidUpdate() {
+        copyProps(this);
+    }
     componentDidMount() {
         this._disposer = reaction(
             () => SelectionManager.Views().slice(),
@@ -361,7 +368,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) {
             SelectionManager.Views().forEach(dv => (dv.Document._text_fontSize = fontSize));
         } else Doc.UserDoc().fontSize = fontSize;
-        this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
+        this.updateMenu(this.view, undefined, this._props, this.layoutDoc);
     };
 
     setFontFamily = (family: string) => {
@@ -370,7 +377,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true);
             this.view.focus();
         } else Doc.UserDoc().fontFamily = family;
-        this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
+        this.updateMenu(this.view, undefined, this._props, this.layoutDoc);
     };
 
     setHighlight(color: string) {
@@ -379,7 +386,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.setMark(highlightMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(highlightMark)), true);
             this.view.focus();
         } else Doc.UserDoc()._fontHighlight = color;
-        this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
+        this.updateMenu(this.view, undefined, this._props, this.layoutDoc);
     }
 
     setColor(color: string) {
@@ -388,7 +395,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.setMark(colorMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(colorMark)), true);
             this.view.focus();
         } else Doc.UserDoc().fontColor = color;
-        this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
+        this.updateMenu(this.view, undefined, this._props, this.layoutDoc);
     }
 
     // TODO: remove doesn't work
@@ -429,7 +436,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             }
         }
         this.view.focus();
-        this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
+        this.updateMenu(this.view, undefined, this._props, this.layoutDoc);
     };
 
     insertSummarizer(state: EditorState, dispatch: any) {
@@ -669,7 +676,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     };
 
     @undoBatch
-    @action
     deleteLink = () => {
         if (this.view) {
             const linkAnchor = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.linkAnchor);
@@ -816,6 +822,18 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
     @observable private showDropdown: boolean = false;
     private ref: HTMLDivElement | null = null;
 
+    _prevProps: React.PropsWithChildren<ButtonDropdownProps>;
+    @observable _props: React.PropsWithChildren<ButtonDropdownProps>;
+    constructor(props: React.PropsWithChildren<ButtonDropdownProps>) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     componentDidMount() {
         document.addEventListener('pointerdown', this.onBlur);
     }
@@ -850,22 +868,22 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
     render() {
         return (
             <div className="button-dropdown-wrapper" ref={node => (this.ref = node)}>
-                {!this.props.pdf ? (
-                    <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.props.openDropdownOnButton ? this.onDropdownClick : undefined}>
-                        {this.props.button}
-                        <div style={{ marginTop: '-8.5', position: 'relative' }} onPointerDown={!this.props.openDropdownOnButton ? this.onDropdownClick : undefined}>
+                {!this._props.pdf ? (
+                    <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this._props.openDropdownOnButton ? this.onDropdownClick : undefined}>
+                        {this._props.button}
+                        <div style={{ marginTop: '-8.5', position: 'relative' }} onPointerDown={!this._props.openDropdownOnButton ? this.onDropdownClick : undefined}>
                             <FontAwesomeIcon icon="caret-down" size="sm" />
                         </div>
                     </div>
                 ) : (
                     <>
-                        {this.props.button}
+                        {this._props.button}
                         <button className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}>
                             <FontAwesomeIcon icon="caret-down" size="sm" />
                         </button>
                     </>
                 )}
-                {this.showDropdown ? this.props.dropdownContent : null}
+                {this.showDropdown ? this._props.dropdownContent : null}
             </div>
         );
     }