Fix toolbar read-only guards

Author: AkaHarshit

src/components/EditorHeader/ControlPanel.jsx

@@ -66,6 +66,7 @@ import {
 import { enterFullscreen, exitFullscreen } from "../../utils/fullscreen";
 import { dataURItoBlob } from "../../utils/utils";
 import { classifyClipboardPayload } from "../../utils/clipboard";
+import { canMutateDiagram } from "../../utils/permissions";
 import { IconAddArea, IconAddNote, IconAddTable } from "../../icons";
 import LayoutDropdown from "./LayoutDropdown";
 import Sidesheet from "./SideSheet/Sidesheet";
@@ -621,7 +622,7 @@ export default function ControlPanel({
     }
   };
   const del = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     switch (selectedElement.element) {
@@ -639,7 +640,7 @@ export default function ControlPanel({
     }
   };
   const duplicate = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     switch (selectedElement.element) {
@@ -699,7 +700,7 @@ export default function ControlPanel({
     }
   };
   const paste = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     navigator.clipboard.readText().then((text) => {
@@ -744,7 +745,7 @@ export default function ControlPanel({
     });
   };
   const cut = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     copy();

src/utils/clipboard.js

@@ -1,5 +1,5 @@
 import { Validator } from "jsonschema";
-import { tableSchema, areaSchema, noteSchema } from "../data/schemas";
+import { tableSchema, areaSchema, noteSchema } from "../data/schemas.js";
 
 const validator = new Validator();
 

src/utils/permissions.js

@@ -0,0 +1,9 @@
+export function canMutateDiagram(layout) {
+  if (!layout) {
+    return true;
+  }
+
+  return !layout.readOnly;
+}
+
+

tests/permissions.test.js

@@ -0,0 +1,17 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { canMutateDiagram } from "../src/utils/permissions.js";
+
+test("allows mutations when layout is undefined", () => {
+  assert.equal(canMutateDiagram(undefined), true);
+});
+
+test("blocks mutations when readOnly flag is true", () => {
+  assert.equal(canMutateDiagram({ readOnly: true }), false);
+});
+
+test("allows mutations when readOnly flag is false", () => {
+  assert.equal(canMutateDiagram({ readOnly: false }), true);
+});
+
+