Update 11.5

bollain · bollain · commit 3d27339d676c · 2025-05-28T15:18:32.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -145,4 +145,4 @@
   "lint-staged": {
     "./src/**/*.{js,ts}": "eslint --fix"
   }
-}
+}
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -703,10 +703,6 @@ const App = ({ removeEventHandlers }) => {
               Component={LazyLoadComponents.HeaderFooterOptionsModal}
               dataElement={DataElements.HEADER_FOOTER_OPTIONS_MODAL}
             />
-            <LazyLoadWrapper
-              Component={LazyLoadComponents.OfficeEditorMarginsModal}
-              dataElement={DataElements.OFFICE_EDITOR_MARGINS_MODAL}
-            />
           </>
         )}
       </div>
diff --git a/src/components/ModularComponents/EditorFileName/EditorFileName.js b/src/components/ModularComponents/EditorFileName/EditorFileName.js
@@ -1,22 +1,20 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import core from 'core';
-import selectors from 'selectors';
 import { useTranslation } from 'react-i18next';
 import useOnDocumentFileNameEdit from 'hooks/useOnDocumentFileNameEdit';
 import Button from 'components/Button';
 import './EditorFileName.scss';
 import PropTypes from 'prop-types';
 import { isMobileSize } from 'helpers/getDeviceSize';
-import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import useOnDocumentUnloaded from 'hooks/useOnDocumentUnloaded';
 import { FILESAVERJS_MAX_NAME_LENTH } from 'src/constants/fileName';
 
-const EDIT_MODE = window.Core.SpreadsheetEditor.SpreadsheetEditorEditMode;
 
 const EditorFileName = ({ dataElement }) => {
   const { t } = useTranslation();
   const {
+    viewOnly,
     extension,
     isEditing,
     fileNameWithoutExtension,
@@ -26,10 +24,7 @@ const EditorFileName = ({ dataElement }) => {
     handleKeyDown,
   } = useOnDocumentFileNameEdit();
 
-  const isSpreadsheetEditorMode = useSelector(selectors.isSpreadsheetEditorModeEnabled);
-  const spreadsheetEditorEditMode = useSelector(selectors.getSpreadsheetEditorEditMode);
-  const isSpreadsheetAndReadOnlyMode = isSpreadsheetEditorMode && spreadsheetEditorEditMode === EDIT_MODE.VIEW_ONLY;
-  const buttonTitlePrefix = isSpreadsheetAndReadOnlyMode ? '' : `${t('action.edit')} ${t('saveModal.fileName')} - `;
+  const buttonTitlePrefix = viewOnly ? '' : `${t('action.edit')} ${t('saveModal.fileName')} - `;
   const [fileName, setFileName] = useState(core.getDocument()?.getFilename());
 
   useEffect(() => {
@@ -54,7 +49,7 @@ const EditorFileName = ({ dataElement }) => {
   }, [fileNameWithoutExtension, extension]);
 
   // Hiding this component on mobile until we implement mobile functionality
-  return !isMobileSize() && isEditing ? (
+  return !isMobileSize() && (isEditing && !viewOnly) ? (
     <input
       maxLength={FILESAVERJS_MAX_NAME_LENTH - extension.length}
       type='text'
@@ -76,6 +71,7 @@ const EditorFileName = ({ dataElement }) => {
       label={fileName}
       title={`${buttonTitlePrefix}${fileName}`}
       onClick={startEditing}
+      disabled={viewOnly}
     />
   );
 };
diff --git a/src/components/ModularComponents/EditorFileName/EditorFileName.stories.js b/src/components/ModularComponents/EditorFileName/EditorFileName.stories.js
@@ -4,8 +4,11 @@ import { configureStore } from '@reduxjs/toolkit';
 import core from 'core';
 import { userEvent, expect, within } from '@storybook/test';
 import EditorFileName from './EditorFileName';
-import { OEModularUIMockState, string280Chars } from 'src/helpers/storybookHelper';
-import { FILESAVERJS_MAX_NAME_LENTH } from 'src/constants/fileName';
+import { OEModularUIMockState, string280Chars } from 'helpers/storybookHelper';
+import { FILESAVERJS_MAX_NAME_LENTH } from 'constants/fileName';
+import { OfficeEditorEditMode } from 'constants/officeEditor';
+import { SpreadsheetEditorEditMode } from 'constants/spreadsheetEditor';
+
 export default {
   title: 'ModularComponents/EditorFileName',
   component: EditorFileName,
@@ -15,7 +18,7 @@ const initialState = OEModularUIMockState;
 
 const store = configureStore({ reducer: () => initialState });
 
-const prepareButtonStory = () => {
+const prepareButtonStory = (dataElement = 'editorFileName') => {
   const oldDoc = core.getDocument;
   core.getDocument = () => ({
     getFilename: () => 'test.docx',
@@ -27,7 +30,7 @@ const prepareButtonStory = () => {
 
   return (
     <Provider store={store}>
-      <EditorFileName dataElement='editorFileName' />
+      <EditorFileName dataElement={dataElement} />
     </Provider>
   );
 };
@@ -60,3 +63,14 @@ FileNameButton.play = async ({ canvasElement }) => {
   const inputCap = secondInput.value.length + extension.length;
   expect(inputCap).toBe(FILESAVERJS_MAX_NAME_LENTH);
 };
+
+export function OfficeEditorDisabledFileName() {
+  initialState.officeEditor.editMode = OfficeEditorEditMode.VIEW_ONLY;
+  return prepareButtonStory();
+}
+
+export function SpreadsheetEditorDisabledFileName() {
+  initialState.viewer.isSpreadsheetEditorModeEnabled = true;
+  initialState.spreadsheetEditor.editMode = SpreadsheetEditorEditMode.VIEW_ONLY;
+  return prepareButtonStory('spreadsheetEditorFileName');
+}
diff --git a/src/components/StylePanel/StylePanelContainer.js b/src/components/StylePanel/StylePanelContainer.js
@@ -1,14 +1,13 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import selectors from 'selectors';
 import core from 'core';
 import { getStylePanelComponent } from './StylePanelFactory';
 import DataElementWrapper from '../DataElementWrapper';
 import NoToolStylePanel from './panels/NoToolStylePanel';
 import getAnnotationCreateToolNames from 'helpers/getAnnotationCreateToolNames';
-import {
-  shouldShowNoStyles
-} from 'helpers/stylePanelHelper';
+import { shouldShowNoStyles } from 'helpers/stylePanelHelper';
+import debounce from 'lodash/debounce';
 
 import './StylePanel.scss';
 
@@ -20,26 +19,15 @@ const StylePanelContainer = () => {
 
   const [selectedAnnotations, setSelectedAnnotations] = useState(core.getSelectedAnnotations());
   const [currentTool, setCurrentTool] = useState(core.getToolMode());
-  const [showStyles, setShowStyles] = useState(false);
 
   const filteredTypes = [Annotations.PushButtonWidgetAnnotation];
 
-  const handleAnnotationDeselected = () => {
-    const latestTool = core.getToolMode();
-    if (latestTool instanceof window.Core.Tools.AnnotationEditTool || window.Core.Tools.TextSelectTool) {
-      setShowStyles(false);
-    }
-    setSelectedAnnotations([]);
-    handleToolModeChange(latestTool);
-    core.setToolMode(latestTool.name);
-  };
-
-  const handleAnnotationSelected = (annotations, action) => {
+  const handleChange = debounce(() => {
     const annotationManager = core.getAnnotationManager();
-    const allSelectedAnnotations = new Set();
-
-    annotations.forEach((annotation) => allSelectedAnnotations.add(annotation));
+    const tool = core.getToolMode();
+    const annotations = core.getSelectedAnnotations();
 
+    const allSelectedAnnotations = new Set(annotations);
     annotations.forEach((annotation) => {
       if (annotation.isGrouped()) {
         const groupedAnnotations = annotationManager.getGroupAnnotations(annotation);
@@ -48,68 +36,46 @@ const StylePanelContainer = () => {
         annotation.getGroupedChildren().forEach((child) => allSelectedAnnotations.add(child));
       }
     });
-
     const selectedAnnotations = Array.from(allSelectedAnnotations);
 
-    if (action === 'selected') {
-      if (shouldShowNoStyles(selectedAnnotations, filteredTypes)) {
-        setShowStyles(false);
-        return;
-      }
-      setSelectedAnnotations(selectedAnnotations);
-      setShowStyles(true);
-    } else if (action === 'deselected') {
-      handleAnnotationDeselected();
-    }
-  };
-
-  const handleToolModeChange = (newTool) => {
-    setCurrentTool(newTool);
-    setSelectedAnnotations([]);
-
-    const toolName = newTool?.name;
-    if (annotationCreateToolNames.includes(toolName)) {
-      setShowStyles(true);
-    } else {
-      setShowStyles(false);
-    }
-  };
+    setSelectedAnnotations(selectedAnnotations);
+    setCurrentTool(tool);
+  }, 150, { leading: false, trailing: true });
 
   useEffect(() => {
     if (isPanelOpen) {
-      const annotations = core.getSelectedAnnotations();
-      if (annotations.length > 0) {
-        setSelectedAnnotations(annotations);
-        setShowStyles(true);
-      } else {
-        const tool = core.getToolMode();
-        handleToolModeChange(tool);
-      }
+      handleChange();
     }
   }, [isPanelOpen]);
 
   useEffect(() => {
-    core.addEventListener('annotationSelected', handleAnnotationSelected);
-    core.addEventListener('toolModeUpdated', handleToolModeChange);
+    core.addEventListener('annotationSelected', handleChange);
+    core.addEventListener('toolModeUpdated', handleChange);
 
     return () => {
-      core.removeEventListener('annotationSelected', handleAnnotationSelected);
-      core.removeEventListener('toolModeUpdated', handleToolModeChange);
+      core.removeEventListener('annotationSelected', handleChange);
+      core.removeEventListener('toolModeUpdated', handleChange);
     };
   }, []);
 
-  const StylePanelComponent = useMemo(() => {
-    if (!showStyles) {
+  const getComponent = () => {
+    const hideStyles = selectedAnnotations.length > 0 ?
+      shouldShowNoStyles(selectedAnnotations, filteredTypes) :
+      !annotationCreateToolNames.includes(currentTool?.name);
+
+    if (hideStyles) {
       return NoToolStylePanel;
     }
 
     return getStylePanelComponent(currentTool, selectedAnnotations);
-  }, [showStyles, currentTool, selectedAnnotations]);
+  };
 
   if (!isPanelOpen) {
     return null;
   }
 
+  const StylePanelComponent = getComponent();
+
   return (
     <DataElementWrapper dataElement="stylePanel" className="Panel StylePanel">
       <StylePanelComponent
diff --git a/src/components/StylePicker/ColorPicker/ColorPicker.js b/src/components/StylePicker/ColorPicker/ColorPicker.js
@@ -57,6 +57,7 @@ const ColorPicker = ({
     setSelectedColor,
     onColorChange,
     setColors: (newColors) => dispatch(actions.setColors(newColors, activeToolName, type, true)),
+    useHex: true,
   });
 
   const openColorPickerModalWithFocus = useFocusHandler(handleAddColor);
diff --git a/src/components/StylePicker/StrokePanelSection/StrokePanelSection.js b/src/components/StylePicker/StrokePanelSection/StrokePanelSection.js
@@ -8,7 +8,7 @@ import {
   defaultStartLineStyles,
   defaultStrokeStyles,
   defaultEndLineStyles,
-  cloudyStrokeStyle
+  cloudyStrokeStyle,
 } from 'constants/strokeStyleIcons';
 import { stylePanelSectionTitles } from 'helpers/stylePanelHelper';
 
@@ -78,8 +78,7 @@ const StrokePanelSection = ({
                     <Dropdown
                       id="middleLineStyleDropdown"
                       translationPrefix={middleLineSegmentLabel}
-                      className={`StylePicker-StrokeLineStyleDropdown${!!strokeStyle && !showLineStyleOptions ? ' StyleOptions' : ''
-                      }`}
+                      className={`StylePicker-StrokeLineStyleDropdown${!!strokeStyle && !showLineStyleOptions ? ' StyleOptions' : ''}`}
                       dataElement="middleLineStyleDropdown"
                       images={showLineStyleOptions || hideCloudyLineStyle ? defaultStrokeStyles : withCloudyStyle}
                       onClickItem={onStrokeStyleChange}
diff --git a/src/components/StylePicker/StylePicker.js b/src/components/StylePicker/StylePicker.js
@@ -50,7 +50,8 @@ const propTypes = {
 
 const MAX_STROKE_THICKNESS = 23;
 
-const StylePicker = ({  onStyleChange,
+const StylePicker = ({
+  onStyleChange,
   style,
   isFreeText,
   isRedaction,
diff --git a/src/helpers/stylePanelHelper.js b/src/helpers/stylePanelHelper.js
@@ -22,6 +22,7 @@ export const shouldHideStrokeDropdowns = (toolName) => {
     Tools.FreeHandHighlightCreateTool,
     Tools.ArcCreateTool,
     Tools.ArcMeasurementCreateTool,
+    Tools.TextAnnotationCreateTool,
   ];
 
   return toolsWithNoStrokeDropdowns.some((tool) => core.getTool(toolName) instanceof tool);
diff --git a/src/hooks/useColorPickerAddColor/useColorPickerAddColor.js b/src/hooks/useColorPickerAddColor/useColorPickerAddColor.js
@@ -13,6 +13,7 @@ const useAddColorHandler = ({
   type,
   activeToolName = '',
   setColors,
+  useHex = false,
 }) => {
   const dispatch = useDispatch();
   const store = useStore();
@@ -26,15 +27,16 @@ const useAddColorHandler = ({
       if (element === DataElements.COLOR_PICKER_MODAL && !isVisible) {
         const colorObject = getCustomColorAndRemove(dispatch, store);
         const color = parseColor(colorObject);
+        const newColor = useHex ? color : colorObject;
         if (color) {
           if (colors.includes(color)) {
-            setSelectedColor(colorObject);
-            onColorChange(colorObject);
+            setSelectedColor(newColor);
+            onColorChange(newColor);
           } else {
             const newColors = [...colors, color];
             setColors(newColors);
-            setSelectedColor(colorObject);
-            onColorChange(colorObject);
+            setSelectedColor(newColor);
+            onColorChange(newColor);
           }
         }
         getInstanceNode().removeEventListener(Events.VISIBILITY_CHANGED, onVisibilityChanged);
diff --git a/src/hooks/useOnDocumentFileNameEdit/useOnDocumentFileNameEdit.js b/src/hooks/useOnDocumentFileNameEdit/useOnDocumentFileNameEdit.js
@@ -1,10 +1,20 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import core from 'core';
+import selectors from 'selectors';
+import { OfficeEditorEditMode } from 'constants/officeEditor';
+import { SpreadsheetEditorEditMode } from 'constants/spreadsheetEditor';
 
 const useOnDocumentFileNameEdit = () => {
+  const isOfficeEditorEnabled = useSelector(selectors.getIsOfficeEditorMode);
+  const officeEditMode = useSelector(selectors.getOfficeEditorEditMode);
+  const isSpreadsheetEditorEnabled = useSelector(selectors.isSpreadsheetEditorModeEnabled);
+  const spreadsheetEditMode = useSelector(selectors.getSpreadsheetEditorEditMode);
+
   const [isEditing, setIsEditing] = useState(false);
   const [extension, setExtension] = useState('');
   const [fileNameWithoutExtension, setFileNameWithoutExtension] = useState('');
+  const [viewOnly, setViewOnly] = useState(false);
 
   const startEditing = () => {
     const name = core.getDocument()?.getFilename();
@@ -31,7 +41,14 @@ const useOnDocumentFileNameEdit = () => {
     }
   };
 
+  useEffect(() => {
+    const isOfficeEditorViewOnly = isOfficeEditorEnabled && officeEditMode === OfficeEditorEditMode.VIEW_ONLY;
+    const isSpreadSheetViewOnly = isSpreadsheetEditorEnabled && spreadsheetEditMode === SpreadsheetEditorEditMode.VIEW_ONLY;
+    setViewOnly(isOfficeEditorViewOnly || isSpreadSheetViewOnly);
+  }, [isOfficeEditorEnabled, officeEditMode, isSpreadsheetEditorEnabled, spreadsheetEditMode]);
+
   return {
+    viewOnly,
     extension,
     isEditing,
     fileNameWithoutExtension,
diff --git a/src/hooks/useStylePanel.js b/src/hooks/useStylePanel.js
@@ -9,7 +9,7 @@ import adjustFreeTextBoundingBox from 'helpers/adjustFreeTextBoundingBox';
 import handleFreeTextAutoSizeToggle from 'helpers/handleFreeTextAutoSizeToggle';
 import getTextDecoration from 'helpers/getTextDecoration';
 import { hexToRGBA } from 'helpers/color';
-import { extractUniqueFontFamilies, stylePanelSectionTitles, } from 'helpers/stylePanelHelper';
+import { extractUniqueFontFamilies, stylePanelSectionTitles } from 'helpers/stylePanelHelper';
 import { useTranslation } from 'react-i18next';
 import defaultTool from 'constants/defaultTool';
 import actions from 'actions';
@@ -181,7 +181,7 @@ const useStylePanel = ({ selectedAnnotations, currentTool }) => {
       updateFromTool(currentTool);
       setShowLineStyleOptions(getDataWithKey(mapToolNameToKey(currentToolName)).hasLineEndings);
     }
-  }, [selectedAnnotation, currentTool]);
+  }, [selectedAnnotation, currentTool, selectedAnnotations]);
 
   const onStyleChange = (property, value) => {
     const newStyle = { ...style, [property]: value };
diff --git a/src/redux/officeEditorModularComponents.js b/src/redux/officeEditorModularComponents.js

Original file line number	Diff line number	Diff line change
`@@ -145,4 +145,4 @@`
`145`	`145`	`"lint-staged": {`
`146`	`146`	`"./src/*/.{js,ts}": "eslint --fix"`
`147`	`147`	`}`
`148`		`-}`
	`148`	`+}`