create editor canvas toolbar

src/pages/editor/components/sidebar/settings/AlignmentSettings.tsx

@@ -38,6 +38,7 @@ const AlignmentSettings = ({
   // const alignToSelection = selectedObjectIds.length === 2;
 
   const applyAlign = (kind: AlignKind) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     const { objects: objs, selectedObjectIds: ids, layerRef } = useEditorStore.getState();
     const layer = layerRef?.current ?? null;
 

src/pages/editor/components/sidebar/settings/MaskSettings.tsx

@@ -30,6 +30,7 @@ const MaskSettings = ({ objectId }: MaskSettingsProps) => {
   );
 
   const handleToggleMask = (checked: boolean) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, {
       isMask: checked,
       showMaskGuide: checked ? true : undefined,
@@ -42,14 +43,17 @@ const MaskSettings = ({ objectId }: MaskSettingsProps) => {
   };
 
   const handleToggleGuide = (checked: boolean) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, { showMaskGuide: checked });
   };
 
   const handleSelectMask = (maskId: string) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, { maskId: maskId || undefined });
   };
 
   const handleToggleMaskInvert = (checked: boolean) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, { maskInvert: checked });
   };