1 files changed, 25 insertions, 6 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index d6c9bb013..a49c69be3 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { RichTextField } from '../../../fields/RichTextField';
-import { Cast, DocCast, NumCast } from '../../../fields/Types';
+import { Cast, DocCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
 import { Gestures } from '../../../pen-gestures/GestureTypes';
 import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -18,6 +18,7 @@ import { InkingStroke } from '../InkingStroke';
 import './DiagramBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import { Tooltip } from '@mui/material';
 /**
  * this is a class for the diagram box doc type that can be found in the tools section of the side bar
  */
@@ -32,6 +33,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
         return false;
     };
+    _boxRef: HTMLDivElement | null = null;
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -44,7 +46,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable _errorMessage = '';
 
     @computed get mermaidcode() {
-        return Cast(this.Document[DocData].text, RichTextField, null)?.Text ?? '';
+        return StrCast(this.Document[DocData].text, RTFCast(this.Document[DocData].text)?.Text);
     }
 
     componentDidMount() {
@@ -129,7 +131,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         );
     });
     isValidCode = (html: string) => (html ? true : false);
-    removeWords = (inputStrIn: string) => inputStrIn.replace('```mermaid', '').replace(`^@mermaids`, '').replace('```', '');
+    removeWords = (inputStrIn: string) => inputStrIn.replace('```mermaid', '').replace(`^@mermaids`, '').replace('```', '').replace(/^"/, '').replace(/"$/, '');
 
     // method to convert the drawings on collection node side the mermaid code
     convertDrawingToMermaidCode = async (docArray: Doc[]) => {
@@ -184,15 +186,32 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return '( )';
     };
 
+    /**
+     * This stops scroll wheel events when they are used to scroll the face collection.
+     */
+    onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
+
     render() {
         return (
-            <div className="DIYNodeBox">
+            <div
+                className="DIYNodeBox"
+                style={{
+                    pointerEvents: this._props.isContentActive() ? undefined : 'none',
+                }}
+                ref={action((ele: HTMLDivElement | null) => {
+                    this._boxRef?.removeEventListener('wheel', this.onPassiveWheel);
+                    this._boxRef = ele;
+                    // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling
+                    ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
+                })}>
                 <div className="DIYNodeBox-searchbar">
                     <input type="text" value={this._inputValue} onKeyDown={action(e => e.key === 'Enter' && this.generateMermaidCode())} onChange={action(e => (this._inputValue = e.target.value))} />
                     <button type="button" onClick={this.generateMermaidCode}>
                         Gen
                     </button>
-                    <input type="checkbox" onClick={action(() => (this._showCode = !this._showCode))} />
+                    <Tooltip title="show diagram code">
+                        <input type="checkbox" onClick={action(() => (this._showCode = !this._showCode))} />
+                    </Tooltip>
                 </div>
                 <div className="DIYNodeBox-content">
                     {this._showCode ? (
@@ -218,7 +237,7 @@ Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {
         _layout_nativeDimEditable: true,
         _layout_reflowVertical: true,
         _layout_reflowHorizontal: true,
-        waitForDoubleClickToClick: 'always',
+        waitForDoubleClickToClick: 'never',
         systemIcon: 'BsGlobe',
     },
 });