Fix/toolbar readonly guard

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "test": "node --test",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

src/components/EditorHeader/ControlPanel.jsx

@@ -47,8 +47,6 @@ import {
 } from "../../data/constants";
 import jsPDF from "jspdf";
 import { useHotkeys } from "react-hotkeys-hook";
-import { Validator } from "jsonschema";
-import { areaSchema, noteSchema, tableSchema } from "../../data/schemas";
 import { db } from "../../data/db";
 import {
   useLayout,
@@ -67,6 +65,8 @@ import {
 } from "../../hooks";
 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";
@@ -622,7 +622,7 @@ export default function ControlPanel({
     }
   };
   const del = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     switch (selectedElement.element) {
@@ -640,7 +640,7 @@ export default function ControlPanel({
     }
   };
   const duplicate = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     switch (selectedElement.element) {
@@ -700,7 +700,7 @@ export default function ControlPanel({
     }
   };
   const paste = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     navigator.clipboard.readText().then((text) => {
@@ -710,36 +710,42 @@ export default function ControlPanel({
       } catch (error) {
         return;
       }
-      const v = new Validator();
-      console.log(obj);
-      if (v.validate(obj, tableSchema).valid) {
+
+      const clipboardEntity = classifyClipboardPayload(obj);
+      if (!clipboardEntity) {
+        return;
+      }
+
+      const { payload } = clipboardEntity;
+
+      if (clipboardEntity.type === "table") {
         addTable({
           table: {
-            ...obj,
-            x: obj.x + 20,
-            y: obj.y + 20,
+            ...payload,
+            x: payload.x + 20,
+            y: payload.y + 20,
             id: nanoid(),
           },
         });
-      } else if (v.validate(obj, areaSchema).valid) {
+      } else if (clipboardEntity.type === "area") {
         addArea({
-          ...obj,
-          x: obj.x + 20,
-          y: obj.y + 20,
+          ...payload,
+          x: payload.x + 20,
+          y: payload.y + 20,
           id: areas.length,
         });
-      } else if (v.validate(obj, noteSchema)) {
+      } else if (clipboardEntity.type === "note") {
         addNote({
-          ...obj,
-          x: obj.x + 20,
-          y: obj.y + 20,
+          ...payload,
+          x: payload.x + 20,
+          y: payload.y + 20,
           id: notes.length,
         });
       }
     });
   };
   const cut = () => {
-    if (layout.readonly) {
+    if (!canMutateDiagram(layout)) {
       return;
     }
     copy();

src/utils/clipboard.js

@@ -0,0 +1,25 @@
+import { Validator } from "jsonschema";
+import { tableSchema, areaSchema, noteSchema } from "../data/schemas.js";
+
+const validator = new Validator();
+
+const schemaMap = [
+  { type: "table", schema: tableSchema },
+  { type: "area", schema: areaSchema },
+  { type: "note", schema: noteSchema },
+];
+
+export function classifyClipboardPayload(payload) {
+  if (!payload || typeof payload !== "object") {
+    return null;
+  }
+
+  for (const { type, schema } of schemaMap) {
+    if (validator.validate(payload, schema).valid) {
+      return { type, payload };
+    }
+  }
+
+  return null;
+}
+

src/utils/permissions.js

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

tests/clipboard.test.js

@@ -0,0 +1,67 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { classifyClipboardPayload } from "../src/utils/clipboard.js";
+
+const baseField = {
+  id: "fld_1",
+  name: "id",
+  type: "INTEGER",
+  default: "",
+  check: "",
+  primary: true,
+  unique: true,
+  notNull: true,
+  increment: true,
+  comment: "",
+};
+
+test("classifies a valid table payload", () => {
+  const payload = {
+    id: "tbl_1",
+    name: "users",
+    x: 0,
+    y: 0,
+    fields: [baseField],
+    comment: "",
+    indices: [],
+    color: "#000000",
+  };
+
+  const result = classifyClipboardPayload(payload);
+  assert.ok(result);
+  assert.equal(result.type, "table");
+  assert.equal(result.payload, payload);
+});
+
+test("classifies a valid note payload", () => {
+  const payload = {
+    id: 0,
+    x: 10,
+    y: 10,
+    title: "Note",
+    content: "",
+    color: "#ffffff",
+    height: 80,
+  };
+
+  const result = classifyClipboardPayload(payload);
+  assert.ok(result);
+  assert.equal(result.type, "note");
+});
+
+test("rejects invalid note payloads", () => {
+  const payload = {
+    id: 0,
+    title: "Broken note",
+  };
+
+  const result = classifyClipboardPayload(payload);
+  assert.equal(result, null);
+});
+
+test("returns null for non-object values", () => {
+  assert.equal(classifyClipboardPayload(null), null);
+  assert.equal(classifyClipboardPayload("string"), null);
+  assert.equal(classifyClipboardPayload(42), null);
+});
+

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);
+});
+
+