fix: disable table resizing UI in viewing mode (#2403)

* fix: disable table resizing UI in viewing mode

* fix: suppress table overlay on viewing clicks

Author: luccas-harbour

packages/super-editor/src/components/SuperEditor.test.js

@@ -48,6 +48,10 @@ vi.mock('./toolbar/LinkInput.vue', () => ({
   default: { name: 'LinkInput', render: () => null },
 }));
 
+vi.mock('./TableResizeOverlay.vue', () => ({
+  default: { name: 'TableResizeOverlay', render: () => null },
+}));
+
 vi.mock('@superdoc/common', () => ({
   getFileObject: getFileObjectMock,
 }));
@@ -1244,5 +1248,56 @@ describe('SuperEditor.vue', () => {
       wrapper.unmount();
       vi.useRealTimers();
     });
+
+    describe('table overlay click guard', () => {
+      it('should suppress overlay updates when clicking in viewing mode', async () => {
+        vi.useFakeTimers();
+        EditorConstructor.loadXmlData.mockResolvedValueOnce(['<docx />', {}, {}, {}]);
+
+        const wrapper = mount(SuperEditor, {
+          props: {
+            documentId: 'doc-click-guard',
+            options: {},
+          },
+        });
+
+        await flushPromises();
+
+        await flushPromises();
+
+        const updateSpy = vi.spyOn(wrapper.vm, 'updateTableResizeOverlay');
+        // Force viewing mode
+        Object.defineProperty(wrapper.vm, 'activeEditor', {
+          value: {
+            value: {
+              options: { documentMode: 'viewing' },
+              isEditable: false,
+              view: { focus: vi.fn() },
+            },
+          },
+        });
+        wrapper.vm.getDocumentMode = () => 'viewing';
+        wrapper.vm.isViewingMode = () => true;
+
+        wrapper.vm.tableResizeState.visible = true;
+        wrapper.vm.tableResizeState.tableElement = { foo: 'bar' };
+        wrapper.vm.editorElem.value = {
+          querySelector: () => ({
+            contains: () => false,
+          }),
+        };
+
+        const event = new MouseEvent('click');
+        Object.defineProperty(event, 'stopPropagation', { value: vi.fn() });
+        Object.defineProperty(event, 'preventDefault', { value: vi.fn() });
+
+        wrapper.vm.handleSuperEditorClick(event);
+
+        expect(updateSpy).not.toHaveBeenCalled();
+
+        wrapper.unmount();
+        vi.useRealTimers();
+      });
+    });
   });
 });

packages/super-editor/src/components/SuperEditor.vue

@@ -721,8 +721,20 @@ const setSelectedImage = (element, blockId, pmStart) => {
 /**
  * Combined handler to update both table and image resize overlays
  */
+const getDocumentMode = () => {
+  if (activeEditor.value?.options?.documentMode) return activeEditor.value.options.documentMode;
+  if (props.options?.documentMode) return props.options.documentMode;
+  return 'editing';
+};
+
+const isViewingMode = () => getDocumentMode() === 'viewing';
+
 const handleOverlayUpdates = (event) => {
-  updateTableResizeOverlay(event);
+  if (isViewingMode()) {
+    hideTableResizeOverlay();
+  } else {
+    updateTableResizeOverlay(event);
+  }
   updateImageResizeOverlay(event);
 };
 
@@ -1036,7 +1048,11 @@ const handleSuperEditorClick = (event) => {
   }
 
   // Update table resize overlay on click
-  updateTableResizeOverlay(event);
+  if (isViewingMode()) {
+    hideTableResizeOverlay();
+  } else {
+    updateTableResizeOverlay(event);
+  }
 };
 
 onMounted(() => {

packages/super-editor/src/components/TableResizeOverlay.test.js

@@ -740,6 +740,71 @@ describe('TableResizeOverlay', () => {
     });
   });
 
+  // ==========================================================================
+  // Viewing Mode Guard Tests
+  // ==========================================================================
+
+  describe('Viewing mode restrictions', () => {
+    it('should ignore column handle drags when documentMode is viewing', async () => {
+      const tableElement = createMockTableElement();
+
+      const wrapper = mount(TableResizeOverlay, {
+        props: {
+          editor: createMockEditor({ options: { documentMode: 'viewing' } }),
+          visible: true,
+          tableElement,
+        },
+      });
+
+      await nextTick();
+
+      const event = new MouseEvent('mousedown', { clientX: 100, clientY: 50 });
+      Object.defineProperty(event, 'preventDefault', { value: vi.fn() });
+      Object.defineProperty(event, 'stopPropagation', { value: vi.fn() });
+
+      wrapper.vm.onHandleMouseDown(event, 0);
+
+      expect(wrapper.vm.dragState).toBeNull();
+      expect(wrapper.emitted('resize-start')).toBeUndefined();
+
+      wrapper.unmount();
+    });
+
+    it('should ignore row handle drags when documentMode is viewing', async () => {
+      const tableElement = createMockTableElement({
+        columns: [
+          { i: 0, x: 0, w: 100, min: 50, r: 1 },
+          { i: 1, x: 100, w: 150, min: 50, r: 1 },
+        ],
+        rows: [
+          { i: 0, y: 0, h: 50, min: 30, r: 1 },
+          { i: 1, y: 50, h: 50, min: 30, r: 1 },
+        ],
+      });
+
+      const wrapper = mount(TableResizeOverlay, {
+        props: {
+          editor: createMockEditor({ options: { documentMode: 'viewing' } }),
+          visible: true,
+          tableElement,
+        },
+      });
+
+      await nextTick();
+
+      const event = new MouseEvent('mousedown', { clientX: 100, clientY: 50 });
+      Object.defineProperty(event, 'preventDefault', { value: vi.fn() });
+      Object.defineProperty(event, 'stopPropagation', { value: vi.fn() });
+
+      wrapper.vm.onRowHandleMouseDown(event, 0);
+
+      expect(wrapper.vm.rowDragState).toBeNull();
+      expect(wrapper.emitted('resize-start')).toBeUndefined();
+
+      wrapper.unmount();
+    });
+  });
+
   // ==========================================================================
   // Overlay Rect Tests
   // ==========================================================================

packages/super-editor/src/components/TableResizeOverlay.vue

@@ -78,6 +78,7 @@ const emit = defineEmits(['resize-start', 'resize-move', 'resize-end', 'resize-s
 
 const overlayEl = ref(null);
 const overlayRect = ref(null);
+const isViewingMode = () => props.editor?.options?.documentMode === 'viewing';
 /**
  * Parsed table metadata from data-table-boundaries attribute
  * @type {import('vue').Ref<{columns: Array<{i: number, x: number, w: number, min: number, r?: number}>} | null>}
@@ -727,6 +728,10 @@ function onHandleMouseDown(event, resizableBoundaryIndex) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (isViewingMode()) {
+    return;
+  }
+
   if (!tableMetadata.value?.columns) return;
 
   const boundary = resizableBoundaries.value[resizableBoundaryIndex];
@@ -1115,6 +1120,10 @@ function onRowHandleMouseDown(event, rowBoundaryIndex) {
   event.preventDefault();
   event.stopPropagation();
 
+  if (isViewingMode()) {
+    return;
+  }
+
   const rowBoundary = resizableRowBoundaries.value[rowBoundaryIndex];
   if (!rowBoundary) return;