[3941] Update context to include monacoProps, use them if applicable …

…in TextView and TextFieldView
craftercms · Oct 9, 2024 · bde5c2e · bde5c2e
1 parent 56d6c3b
commit bde5c2e
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 41 deletions.
diff --git a/ui/app/src/components/CompareVersionsDialog/CompareFieldPanel.tsx b/ui/app/src/components/CompareVersionsDialog/CompareFieldPanel.tsx
@@ -15,7 +15,7 @@
  */
 
 import { ContentTypeField } from '../../models/ContentType';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Box from '@mui/material/Box';
 import { getContentInstanceValueFromProp } from '../../utils/content';
 import { fromString, serialize } from '../../utils/xml';
@@ -36,13 +36,11 @@ export interface CompareFieldPanelProps {
   onSelectField?(field: ContentTypeField): void;
 }
 
-export interface DiffComponentProps extends Pick<DiffViewComponentBaseProps, 'aXml' | 'bXml' | 'field'> {
-  editorProps?: DiffEditorProps;
-}
+export interface DiffComponentProps extends DiffViewComponentBaseProps {}
 
 export function CompareFieldPanel(props: CompareFieldPanelProps) {
   const { a, b, field, onSelectField, dynamicHeight } = props;
-  const [{ fieldsViewState }] = useVersionsDialogContext();
+  const [{ fieldsViewState }, contextApiRef] = useVersionsDialogContext();
   const fieldType = field.type;
   const versionAXmlDoc = fromString(a.xml);
   const versionBXmlDoc = fromString(b.xml);
@@ -59,17 +57,20 @@ export function CompareFieldPanel(props: CompareFieldPanelProps) {
   const unchanged = versionAFieldXml === versionBFieldXml;
   const contentA = getContentInstanceValueFromProp(a.content, field.id);
   const longerXmlContent = versionAFieldXml.length > versionBFieldXml.length ? versionAFieldXml : versionBFieldXml;
-  const monacoEditorHeight = dynamicHeight ? (countLines(longerXmlContent) < 15 ? '200px' : '600px') : '100%';
   const DiffComponent = typesDiffMap[fieldType] ?? DefaultDiffView;
   const viewState = fieldsViewState[field.id] ?? initialFieldViewState;
-  const { compareXml, monacoOptions } = viewState;
+  const { compareXml } = viewState;
   const diffComponentProps: DiffComponentProps = {
     aXml: versionAFieldXml,
     bXml: versionBFieldXml,
-    field,
-    editorProps: { options: monacoOptions, height: monacoEditorHeight }
+    field
   };
 
+  useEffect(() => {
+    const monacoEditorHeight = dynamicHeight ? (countLines(longerXmlContent) < 15 ? '200px' : '600px') : '100%';
+    contextApiRef.current.setFieldViewEditorPropsState(field.id, { height: monacoEditorHeight });
+  }, [dynamicHeight, longerXmlContent, contextApiRef, field.id]);
+
   return (
     <Box height="calc(100% - 70px)" display="flex" flexDirection="column">
       {unchanged ? (
@@ -86,7 +87,7 @@ export function CompareFieldPanel(props: CompareFieldPanelProps) {
             <TextDiffView
               aXml={versionAFieldXml}
               bXml={versionBFieldXml}
-              editorProps={diffComponentProps.editorProps}
+              editorProps={viewState?.monacoProps as DiffEditorProps}
             />
           ) : (
             <ErrorBoundary key={field.id}>

diff --git a/ui/app/src/components/CompareVersionsDialog/CompareVersionsDialog.tsx b/ui/app/src/components/CompareVersionsDialog/CompareVersionsDialog.tsx
@@ -87,14 +87,32 @@ export function CompareVersionsDialog(props: CompareVersionsDialogProps) {
           fieldsViewState: { ...state.fieldsViewState, [fieldId]: { ...state.fieldsViewState[fieldId], ...viewState } }
         });
       },
+      setFieldViewEditorPropsState(fieldId, props: DiffEditorProps) {
+        setState({
+          ...state,
+          fieldsViewState: {
+            ...state.fieldsViewState,
+            [fieldId]: {
+              ...state.fieldsViewState[fieldId],
+              monacoProps: {
+                ...state.fieldsViewState[fieldId]?.monacoProps,
+                ...props
+              }
+            }
+          }
+        });
+      },
       setFieldViewEditorOptionsState(fieldId: string, options: DiffEditorProps['options']) {
         setState({
           ...state,
           fieldsViewState: {
             ...state.fieldsViewState,
             [fieldId]: {
               ...state.fieldsViewState[fieldId],
-              monacoOptions: { ...state.fieldsViewState[fieldId].monacoOptions, ...options }
+              monacoProps: {
+                ...state.fieldsViewState[fieldId]?.monacoProps,
+                options: { ...state.fieldsViewState[fieldId].monacoProps.options, ...options }
+              }
             }
           }
         });

diff --git a/ui/app/src/components/CompareVersionsDialog/FieldVersionToolbar.tsx b/ui/app/src/components/CompareVersionsDialog/FieldVersionToolbar.tsx
@@ -36,6 +36,7 @@ import { typesViewMap } from '../ViewVersionDialog/ContentFieldView';
 import TextView from '../ViewVersionDialog/FieldTypesViews/TextView';
 import TextDiffView from './FieldsTypesDiffViews/TextDiffView';
 import { typesDiffMap } from './utils';
+import { DiffEditorProps } from '@monaco-editor/react';
 
 interface FieldVersionToolbarProps {
   field: ContentTypeField;
@@ -63,7 +64,8 @@ export function FieldVersionToolbar(props: FieldVersionToolbarProps) {
   const nextField = contentTypeFields[currentFieldIndex + 1] || contentTypeFields[0];
   const previousField = contentTypeFields[currentFieldIndex - 1] || contentTypeFields[contentTypeFields.length - 1];
   const viewState = fieldsViewState[field.id] ?? initialFieldViewState;
-  const { compareXml, cleanText, monacoOptions, compareMode, compareModeDisabled } = viewState;
+  const { compareXml, cleanText, monacoProps, compareMode, compareModeDisabled } = viewState;
+  const monacoOptions = (monacoProps?.options as DiffEditorProps['options']) ?? {};
   const showDivider =
     (!compareXml && fieldType === 'repeat') ||
     compareXml ||
@@ -157,7 +159,7 @@ export function FieldVersionToolbar(props: FieldVersionToolbarProps) {
                       });
                     }}
                   >
-                    {viewState?.monacoOptions.ignoreTrimWhitespace ? (
+                    {monacoOptions.ignoreTrimWhitespace ? (
                       <FormattedMessage defaultMessage="Show whitespace" />
                     ) : (
                       <FormattedMessage defaultMessage="Hide whitespace" />

diff --git a/ui/app/src/components/CompareVersionsDialog/FieldsTypesDiffViews/TextDiffView.tsx b/ui/app/src/components/CompareVersionsDialog/FieldsTypesDiffViews/TextDiffView.tsx
@@ -31,7 +31,7 @@ export interface TextDiffViewProps extends Pick<DiffViewComponentBaseProps, 'aXm
 }
 
 export function TextDiffView(props: TextDiffViewProps) {
-  const { aXml, bXml, field, editorProps } = props;
+  const { aXml, bXml, field, editorProps = {} } = props;
   const contentTypes = useContentTypes();
   const contentA =
     aXml && field ? parseElementByContentType(fromString(aXml).querySelector(field.id), field, contentTypes, {}) : aXml;
@@ -43,7 +43,7 @@ export function TextDiffView(props: TextDiffViewProps) {
   const modifiedContent = cleanText ? removeTags(contentB ?? '') : contentB;
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const language = textViewLanguageMap[field?.type] || 'xml';
-
+  const monacoContextProps = fieldsViewState[field?.id]?.monacoProps ?? {};
   const monacoOptions: DiffEditorProps['options'] = {
     readOnly: true,
     automaticLayout: true,
@@ -53,7 +53,8 @@ export function TextDiffView(props: TextDiffViewProps) {
     renderWhitespace: 'none',
     renderIndicators: false,
     scrollbar: { alwaysConsumeMouseWheel: false },
-    ...editorProps.options
+    ...editorProps?.options,
+    ...monacoContextProps?.options
   };
 
   return (
@@ -64,6 +65,7 @@ export function TextDiffView(props: TextDiffViewProps) {
       modified={modifiedContent}
       theme={prefersDarkMode ? 'vs-dark' : 'vs'}
       {...editorProps}
+      {...(monacoContextProps as DiffEditorProps)}
       options={monacoOptions}
     />
   );

diff --git a/ui/app/src/components/CompareVersionsDialog/VersionsDialogContext.tsx b/ui/app/src/components/CompareVersionsDialog/VersionsDialogContext.tsx
@@ -15,7 +15,7 @@
  */
 
 import { createContext, MutableRefObject, useContext } from 'react';
-import { DiffEditorProps } from '@monaco-editor/react';
+import { DiffEditorProps, EditorProps } from '@monaco-editor/react';
 import { CompareVersionsDialogProps } from './utils';
 import { ViewVersionDialogProps } from '../ViewVersionDialog/utils';
 import { LookupTable } from '../../models';
@@ -26,7 +26,7 @@ export interface FieldViewState {
   cleanText: boolean;
   compareMode: boolean;
   compareModeDisabled: boolean;
-  monacoOptions: DiffEditorProps['options'];
+  monacoProps?: DiffEditorProps | EditorProps;
 }
 
 export interface VersionsDialogContextProps {
@@ -43,11 +43,13 @@ export const initialFieldViewState = {
   cleanText: false,
   compareMode: false,
   compareModeDisabled: false,
-  monacoOptions: {
-    ignoreTrimWhitespace: false,
-    renderSideBySide: true,
-    diffWordWrap: 'off' as DiffEditorProps['options']['diffWordWrap'],
-    wordWrap: 'on' as DiffEditorProps['options']['wordWrap']
+  monacoProps: {
+    options: {
+      ignoreTrimWhitespace: false,
+      renderSideBySide: true,
+      diffWordWrap: 'off' as DiffEditorProps['options']['diffWordWrap'],
+      wordWrap: 'on' as DiffEditorProps['options']['wordWrap']
+    }
   }
 };
 
@@ -65,6 +67,7 @@ export interface VersionsDialogContextApi {
   setCompareSlideOutState: (props: Partial<CompareVersionsDialogProps>) => void;
   setViewSlideOutState: (props: Partial<ViewVersionDialogProps>) => void;
   setFieldViewState: (fieldId: string, viewState: Partial<FieldViewState>) => void;
+  setFieldViewEditorPropsState: (fieldId: string, props: DiffEditorProps) => void;
   setFieldViewEditorOptionsState: (fieldId: string, options: DiffEditorProps['options']) => void;
   closeSlideOuts: () => void;
 }

diff --git a/ui/app/src/components/ViewVersionDialog/ContentFieldView.tsx b/ui/app/src/components/ViewVersionDialog/ContentFieldView.tsx
@@ -16,8 +16,7 @@
 
 import { ContentTypeField, Primitive } from '../../models';
 import Box from '@mui/material/Box';
-import React from 'react';
-import { fromString, serialize } from '../../utils/xml';
+import React, { useEffect } from 'react';
 import { nnou } from '../../utils/object';
 import { countLines } from '../../utils/string';
 import { initialFieldViewState, useVersionsDialogContext } from '../CompareVersionsDialog/VersionsDialogContext';
@@ -48,9 +47,7 @@ export interface ContentFieldViewProps {
   onSelectField?(field: ContentTypeField): void;
 }
 
-export interface ViewComponentProps extends Pick<ViewComponentBaseProps, 'xml' | 'field'> {
-  editorProps?: EditorProps;
-}
+export interface ViewComponentProps extends ViewComponentBaseProps {}
 
 export const typesViewMap = {
   'file-name': FileNameView,
@@ -73,25 +70,25 @@ export const typesViewMap = {
 export function ContentFieldView(props: ContentFieldViewProps) {
   const { content, field, xml = '', dynamicHeight } = props;
   const fieldXml = getContentInstanceXmlValueFromProp(xml, field.id);
-  const [{ fieldsViewState }] = useVersionsDialogContext();
+  const [{ fieldsViewState }, contextApiRef] = useVersionsDialogContext();
   const viewState = fieldsViewState[field.id] ?? initialFieldViewState;
-  const { compareXml: viewXml, monacoOptions } = viewState;
-  const monacoEditorHeight = !dynamicHeight ? '100%' : countLines(fieldXml ?? '') < 15 ? '200px' : '600px';
+  const { compareXml: viewXml } = viewState;
   const ViewComponent = typesViewMap[field.type] ?? DefaultView;
   const viewComponentProps: ViewComponentProps = {
     xml: fieldXml,
-    field,
-    editorProps: {
-      options: monacoOptions,
-      height: monacoEditorHeight
-    }
+    field
   };
   const noContentSet = ViewComponent !== Boolean && !content;
 
+  useEffect(() => {
+    const monacoEditorHeight = !dynamicHeight ? '100%' : countLines(fieldXml ?? '') < 15 ? '200px' : '600px';
+    contextApiRef.current.setFieldViewEditorPropsState(field.id, { height: monacoEditorHeight });
+  }, [dynamicHeight, fieldXml, contextApiRef, field.id]);
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       {viewXml ? (
-        <TextView xml={fieldXml} editorProps={viewComponentProps.editorProps} />
+        <TextView xml={fieldXml} editorProps={viewState?.monacoProps as EditorProps} />
       ) : nnou(ViewComponent) ? (
         noContentSet ? (
           <Box sx={{ textAlign: 'center' }}>

diff --git a/ui/app/src/components/ViewVersionDialog/FieldTypesViews/TextView.tsx b/ui/app/src/components/ViewVersionDialog/FieldTypesViews/TextView.tsx
@@ -30,14 +30,15 @@ export interface TextViewProps extends Pick<ViewComponentBaseProps, 'xml'> {
 }
 
 export function TextView(props: TextViewProps) {
-  const { xml, field, editorProps } = props;
+  const { xml, field, editorProps = {} } = props;
   const xmlFieldId = systemPropToXmlMap[field?.id] || field?.id;
   const content = field ? fromString(xml).querySelector(xmlFieldId).textContent : xml;
   const [{ fieldsViewState }] = useVersionsDialogContext();
   const cleanText = field && fieldsViewState[field.id]?.cleanText;
   const value = cleanText ? removeTags(content ?? '') : content;
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const language = textViewLanguageMap[field?.type] || 'xml';
+  const monacoContextProps = fieldsViewState[field?.id]?.monacoProps ?? {};
   const monacoOptions: EditorProps['options'] = {
     readOnly: true,
     automaticLayout: true,
@@ -46,7 +47,8 @@ export function TextView(props: TextViewProps) {
     scrollBeyondLastLine: false,
     renderWhitespace: 'none',
     scrollbar: { alwaysConsumeMouseWheel: false },
-    ...editorProps?.options
+    ...editorProps?.options,
+    ...monacoContextProps?.options
   };
 
   return (
@@ -55,7 +57,8 @@ export function TextView(props: TextViewProps) {
       language={language}
       value={value}
       theme={prefersDarkMode ? 'vs-dark' : 'vs'}
-      {...(editorProps as EditorProps)}
+      {...editorProps}
+      {...(monacoContextProps as EditorProps)}
       options={monacoOptions}
     />
   );

diff --git a/ui/app/src/components/ViewVersionDialog/ViewVersionDialog.tsx b/ui/app/src/components/ViewVersionDialog/ViewVersionDialog.tsx
@@ -61,14 +61,32 @@ export function ViewVersionDialog(props: ViewVersionDialogProps) {
           fieldsViewState: { ...state.fieldsViewState, [fieldId]: { ...state.fieldsViewState[fieldId], ...viewState } }
         });
       },
+      setFieldViewEditorPropsState(fieldId, props: DiffEditorProps) {
+        setState({
+          ...state,
+          fieldsViewState: {
+            ...state.fieldsViewState,
+            [fieldId]: {
+              ...state.fieldsViewState[fieldId],
+              monacoProps: {
+                ...state.fieldsViewState[fieldId]?.monacoProps,
+                ...props
+              }
+            }
+          }
+        });
+      },
       setFieldViewEditorOptionsState(fieldId: string, options: DiffEditorProps['options']) {
         setState({
           ...state,
           fieldsViewState: {
             ...state.fieldsViewState,
             [fieldId]: {
               ...state.fieldsViewState[fieldId],
-              monacoOptions: { ...state.fieldsViewState[fieldId].monacoOptions, ...options }
+              monacoProps: {
+                ...state.fieldsViewState[fieldId]?.monacoProps,
+                options: { ...state.fieldsViewState[fieldId].monacoProps.options, ...options }
+              }
             }
           }
         });