disable input from control panel and popovers

src/components/EditorCanvas/Area.jsx

@@ -179,6 +179,7 @@ export default function Area({
                     backgroundColor: "#2F68ADB3",
                   }}
                   onClick={lockUnlockArea}
+                  disabled={layout.readOnly}
                 />
                 <Popover
                   visible={areaIsOpen() && !layout.sidebar}
@@ -257,7 +258,7 @@ function EditPopoverContent({ data }) {
   const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { t } = useTranslation();
-  const {layout} = useLayout();
+  const { layout } = useLayout();
   const initialColorRef = useRef(data.color);
 
   const handleColorPick = (color) => {
@@ -303,7 +304,7 @@ function EditPopoverContent({ data }) {
           value={data.name}
           placeholder={t("name")}
           className="me-2"
-          readOnly={layout.readOnly}
+          readonly={layout.readOnly}
           onChange={(value) => updateArea(data.id, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
           onBlur={(e) => {
@@ -327,7 +328,7 @@ function EditPopoverContent({ data }) {
         />
         <ColorPicker
           usePopover={true}
-          readOnly={true}
+          readOnly={layout.readOnly}
           value={data.color}
           onChange={(color) => updateArea(data.id, { color })}
           onColorPick={(color) => handleColorPick(color)}
@@ -339,6 +340,7 @@ function EditPopoverContent({ data }) {
           type="danger"
           block
           onClick={() => deleteArea(data.id, true)}
+          disabled={layout.readOnly}
         >
           {t("delete")}
         </Button>

src/components/EditorCanvas/Note.jsx

@@ -249,6 +249,7 @@ export default function Note({ data, onPointerDown }) {
                     backgroundColor: "#2F68ADB3",
                   }}
                   onClick={lockUnlockNote}
+                  disabled={layout.readOnly}
                 />
                 <Popover
                   visible={
@@ -280,6 +281,7 @@ export default function Note({ data, onPointerDown }) {
                           value={data.title}
                           placeholder={t("title")}
                           className="me-2"
+                          readonly={layout.readOnly}
                           onChange={(value) =>
                             updateNote(data.id, { title: value })
                           }
@@ -307,6 +309,7 @@ export default function Note({ data, onPointerDown }) {
                         />
                         <ColorPicker
                           usePopover={true}
+                          readOnly={layout.readOnly}
                           value={data.color}
                           onChange={(color) => updateNote(data.id, { color })}
                           onColorPick={(color) => handleColorPick(color)}
@@ -314,9 +317,10 @@ export default function Note({ data, onPointerDown }) {
                       </div>
                       <div className="flex">
                         <Button
-                          icon={<IconDeleteStroked />}
-                          type="danger"
                           block
+                          type="danger"
+                          disabled={layout.readOnly}
+                          icon={<IconDeleteStroked />}
                           onClick={() => deleteNote(data.id, true)}
                         >
                           {t("delete")}
@@ -343,6 +347,7 @@ export default function Note({ data, onPointerDown }) {
           </div>
           <textarea
             id={`note_${data.id}`}
+            readOnly={layout.readOnly}
             value={data.content}
             onChange={handleChange}
             onFocus={(e) =>

src/components/EditorCanvas/Table.jsx

@@ -171,6 +171,7 @@ export default function Table({
                   style={{
                     backgroundColor: "#2f68adb3",
                   }}
+                  disabled={layout.readOnly}
                   onClick={lockUnlockTable}
                 />
                 <Button
@@ -234,6 +235,7 @@ export default function Table({
                         block
                         style={{ marginTop: "8px" }}
                         onClick={() => deleteTable(tableData.id)}
+                        disabled={layout.readOnly}
                       >
                         {t("delete")}
                       </Button>

src/components/EditorHeader/ControlPanel.jsx

@@ -1603,47 +1603,46 @@ export default function ControlPanel({
           <Divider layout="vertical" margin="8px" />
           <Tooltip content={t("undo")} position="bottom">
             <button
-              className="py-1 px-2 hover-2 rounded-sm flex items-center"
+              className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
+              disabled={undoStack.length === 0}
               onClick={undo}
             >
-              <IconUndo
-                size="large"
-                style={{ color: undoStack.length === 0 ? "#9598a6" : "" }}
-              />
+              <IconUndo size="large" />
             </button>
           </Tooltip>
           <Tooltip content={t("redo")} position="bottom">
             <button
-              className="py-1 px-2 hover-2 rounded-sm flex items-center"
+              className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
+              disabled={redoStack.length === 0}
               onClick={redo}
             >
-              <IconRedo
-                size="large"
-                style={{ color: redoStack.length === 0 ? "#9598a6" : "" }}
-              />
+              <IconRedo size="large" />
             </button>
           </Tooltip>
           <Divider layout="vertical" margin="8px" />
           <Tooltip content={t("add_table")} position="bottom">
             <button
-              className="flex items-center py-1 px-2 hover-2 rounded-sm"
+              className="flex items-center py-1 px-2 hover-2 rounded-sm disabled:opacity-50"
               onClick={() => addTable()}
+              disabled={layout.readOnly}
             >
               <IconAddTable />
             </button>
           </Tooltip>
           <Tooltip content={t("add_area")} position="bottom">
             <button
-              className="py-1 px-2 hover-2 rounded-sm flex items-center"
+              className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
               onClick={() => addArea()}
+              disabled={layout.readOnly}
             >
               <IconAddArea />
             </button>
           </Tooltip>
           <Tooltip content={t("add_note")} position="bottom">
             <button
-              className="py-1 px-2 hover-2 rounded-sm flex items-center"
+              className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
               onClick={() => addNote()}
+              disabled={layout.readOnly}
             >
               <IconAddNote />
             </button>
@@ -1651,8 +1650,9 @@ export default function ControlPanel({
           <Divider layout="vertical" margin="8px" />
           <Tooltip content={t("save")} position="bottom">
             <button
-              className="py-1 px-2 hover-2 rounded-sm flex items-center"
+              className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
               onClick={save}
+              disabled={layout.readOnly}
             >
               <IconSaveStroked size="extra-large" />
             </button>
@@ -1887,11 +1887,7 @@ export default function ControlPanel({
                   </Dropdown>
                 ))}
               </div>
-              {layout.readOnly && (
-                <Tag size="small">
-                  {t("read_only")}
-                </Tag>
-              )}
+              {layout.readOnly && <Tag size="small">{t("read_only")}</Tag>}
               {!layout.readOnly && (
                 <Tag
                   size="small"

src/components/EditorSidePanel/AreasTab/AreasTab.jsx

@@ -1,13 +1,14 @@
 import { Button } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
 import Empty from "../Empty";
-import { useAreas } from "../../../hooks";
+import { useAreas, useLayout } from "../../../hooks";
 import SearchBar from "./SearchBar";
 import AreaInfo from "./AreaDetails";
 import { useTranslation } from "react-i18next";
 
 export default function AreasTab() {
   const { areas, addArea } = useAreas();
+  const { layout } = useLayout();
   const { t } = useTranslation();
 
   return (
@@ -15,7 +16,12 @@ export default function AreasTab() {
       <div className="flex gap-2">
         <SearchBar />
         <div>
-          <Button icon={<IconPlus />} block onClick={() => addArea()}>
+          <Button
+            icon={<IconPlus />}
+            block
+            onClick={() => addArea()}
+            disabled={layout.readOnly}
+          >
             {t("add_area")}
           </Button>
         </div>