added initial support for equationBox font size setting

4 files changed, 26 insertions, 1 deletions

diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 453bdac8e..e5913d997 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -162,6 +162,7 @@
         width: 100%;
         height: 100%;
         border-radius: inherit;
+        white-space: normal;
 
         .documentView-styleContentWrapper {
             width: 100%;
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index c279341cc..da9be63b8 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -21,6 +21,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static SelectOnLoad: string = '';
     _ref: React.RefObject<EquationEditor> = React.createRef();
     componentDidMount() {
+        this.props.setContentView?.(this);
         if (EquationBox.SelectOnLoad === this.rootDoc[Id] && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) {
             this.props.select(false);
 
@@ -100,6 +101,13 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 if (entries[0].contentBoxSize[0].inlineSize) {
                                     this.rootDoc._width = entries[0].contentBoxSize[0].inlineSize;
                                 }
+                                const style = this._ref.current && getComputedStyle(this._ref.current.element.current);
+                                if (style) {
+                                    const _height = Number(style.height.replace('px', ''));
+                                    const _width = Number(style.width.replace('px', ''));
+                                    this.layoutDoc._width = Math.max(35, _width);
+                                    this.layoutDoc._height = Math.max(25, _height);
+                                }
                             })
                         ).observe(r);
                 }}
@@ -110,6 +118,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     width: 'fit-content', // `${100 / scale}%`,
                     height: `${100 / scale}%`,
                     pointerEvents: !this.props.isSelected() ? 'none' : undefined,
+                    fontSize: StrCast(this.rootDoc._fontSize),
                 }}
                 onKeyDown={e => e.stopPropagation()}>
                 <EquationEditor ref={this._ref} value={this.dataDoc.text || 'x'} spaceBehavesLikeTab={true} onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" />
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 1de29f806..9ef32014b 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -133,7 +133,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     @computed get numberButton() {
         const numBtnType: string = StrCast(this.rootDoc.numBtnType);
         const numScript = ScriptCast(this.rootDoc.script);
-        const setValue = (value: number) => numScript?.script.run({ value, _readOnly_: false });
+        const setValue = (value: number) => UndoManager.RunInBatch(() => numScript?.script.run({ value, _readOnly_: false }), 'set num value');
 
         // Script for checking the outcome of the toggle
         const checkResult: number = numScript?.script.run({ value: 0, _readOnly_: true }).result || 0;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 6c6d26af5..b70da2e5e 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -20,6 +20,7 @@ import { FormattedTextBox } from './FormattedTextBox';
 import { updateBullets } from './ProsemirrorExampleTransfer';
 import './RichTextMenu.scss';
 import { schema } from './schema_rts';
+import { EquationBox } from '../EquationBox';
 const { toggleMark } = require('prosemirror-commands');
 
 @observer
@@ -97,6 +98,16 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     @computed get textAlign() {
         return this._activeAlignment;
     }
+    _disposer: IReactionDisposer | undefined;
+    componentDidMount() {
+        this._disposer = reaction(
+            () => SelectionManager.Views(),
+            views => this.updateMenu(undefined, undefined, undefined)
+        );
+    }
+    componentWillUnmount() {
+        this._disposer?.();
+    }
 
     @action
     public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: any) {
@@ -206,6 +217,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
                 m.type === state.schema.marks.pFontSize && activeSizes.add(m.attrs.fontSize);
                 m.type === state.schema.marks.marker && activeHighlights.add(String(m.attrs.highlight));
             });
+        } else if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) {
+            SelectionManager.Views().forEach(dv => StrCast(dv.rootDoc._fontSize) && activeSizes.add(StrCast(dv.rootDoc._fontSize)));
         }
         return { activeFamilies: Array.from(activeFamilies), activeSizes: Array.from(activeSizes), activeColors: Array.from(activeColors), activeHighlights: Array.from(activeHighlights) };
     }
@@ -328,6 +341,8 @@ 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 if (SelectionManager.Views().some(dv => dv.ComponentView instanceof EquationBox)) {
+            SelectionManager.Views().forEach(dv => (dv.rootDoc._fontSize = fontSize));
         } else Doc.UserDoc()._fontSize = fontSize;
         this.updateMenu(this.view, undefined, this.props);
     };