Editor Optimizations

client/packages/lowcoder/package.json

@@ -101,7 +101,7 @@
     "react-quill-new": "^3.4.6",
     "react-redux": "^7.2.6",
     "react-resizable": "^3.0.4",
-    "react-resize-detector": "^12.0.2",
+    "react-resize-detector": "^12.3.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-signature-canvas": "^1.0.6",
@@ -132,7 +132,8 @@
     "y-protocols": "^1.0.6",
     "y-websocket": "^3.0.0",
     "yjs": "^13.6.27",
-    "zod": "^3.25.76"
+    "zod": "^3.25.76",
+    "zustand": "^5.0.14"
   },
   "scripts": {
     "supportedBrowsers": "yarn dlx browserslist-useragent-regexp --allowHigherVersions '>0.2%,not dead,not op_mini all,chrome >=69'",

client/packages/lowcoder/src/components/CompName.tsx

@@ -15,6 +15,7 @@ import { trans } from "i18n";
 import { getComponentDocUrl } from "comps/utils/compDocUtil";
 import { getComponentPlaygroundUrl } from "comps/utils/compDocUtil";
 import { parseCompType } from "comps/utils/remote";
+import { useEditorStore } from "comps/editorStore";
 
 const CompDiv = styled.div<{ $width?: number; $hasSearch?: boolean; $showSearch?: boolean }>`
   width: ${(props) => (props.$width ? props.$width : 312)}px;
@@ -79,7 +80,11 @@ export const CompName = React.memo((props: Iprops) => {
   const [showSearch, setShowSearch] = useState<boolean>(false);
 
   const editorState = useContext(EditorContext);
-  const selectedComp = useMemo(() => values(editorState.selectedComps())[0], [editorState]);
+  const selectedCompNames = useEditorStore((state) => state.selectedCompNames);
+  const selectedComp = useMemo(
+    () => values(editorState.selectedComps(selectedCompNames))[0],
+    [editorState, selectedCompNames]
+  );
   const compType = useMemo(() => selectedComp.children.compType.getView() as UICompType, [selectedComp]);
   const compInfo = useMemo(() => parseCompType(compType), [compType]);
   const docUrl = useMemo(() => getComponentDocUrl(compType), [compType]);

client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx

@@ -127,7 +127,7 @@ export const AppPermissionDialog = React.memo(
     return (
       <StepModal
         open={props.visible}
-        destroyOnClose
+        destroyOnHidden
         onCancel={() => {
           setActiveStepKey("permission");
           props.onVisibleChange(false);

client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx

@@ -3,6 +3,7 @@ import Draggable from "react-draggable";
 import * as React from "react";
 import { useContext, useRef, useState } from "react";
 import { EditorContext } from "../../comps/editorState";
+import { useEditorStore } from "../../comps/editorStore";
 import { Layers } from "constants/Layers";
 import { HeaderWrapper, useResultPanel } from "./index";
 
@@ -31,7 +32,8 @@ interface BottomResultPanelProps {
 export const BottomResultPanel = (props: BottomResultPanelProps) => {
   const { bottom } = props;
   const editorState = useContext(EditorContext);
-  const showResultComp = editorState.showResultComp();
+  const showResultCompName = useEditorStore((state) => state.showResultCompName);
+  const showResultComp = editorState.showResultComp(showResultCompName);
   const result = showResultComp?.result();
 
   const draggableRef = useRef<HTMLDivElement>(null);

client/packages/lowcoder/src/comps/comps/avatarGroup.tsx

@@ -10,9 +10,9 @@ import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { Avatar, Tooltip } from "antd";
 import { clickEvent, doubleClickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
 import styled from "styled-components";
-import { useContext, ReactElement, useEffect } from "react";
+import { ReactElement, useEffect } from "react";
 import { MultiCompBuilder, stateComp, withDefault } from "../generators";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { IconControl } from "../controls/iconControl";
 import { ColorControl } from "../controls/colorControl";
 import { optionsControl } from "../controls/optionsControl";
@@ -148,9 +148,11 @@ let AvatarGroupBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     return( <AvatarGroupView {...props} dispatch={dispatch} />
 )}) 
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
-        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["logic", "both"].includes(editorModeStatus) && (
           <>
             <Section name={sectionNames.basic}>
               {children.avatars.propertyView({})}
@@ -175,7 +177,7 @@ let AvatarGroupBasicComp = (function () {
           </>
         )}
 
-        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        {["layout", "both"].includes(editorModeStatus) && (
           <>
           <Section name={sectionNames.avatarStyle}>
             {children.avatar.getPropertyView()}
@@ -186,7 +188,8 @@ let AvatarGroupBasicComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 

client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

@@ -3,6 +3,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { IconControl } from "comps/controls/iconControl";
 import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { withDefault } from "comps/generators";
 import { NewChildren, UICompBuilder } from "comps/generators/uiCompBuilder";
 import {
@@ -146,7 +147,7 @@ type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
 const ButtonPropertyView = React.memo((props: {
   children: ChildrenType
 }) => {
-  const { editorModeStatus } = useContext(EditorContext);
+  const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
   return (
     <>
       <Section name={sectionNames.basic}>

client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

@@ -9,8 +9,8 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { Section, sectionNames } from "lowcoder-design";
 import { trans } from "i18n";
-import React, { ReactElement, useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import React, { ReactElement } from "react";
+import { useEditorStore } from "comps/editorStore";
 import styled from "styled-components";
 import EllipsisOutlined from "@ant-design/icons/EllipsisOutlined";
 import { IconControl } from "comps/controls/iconControl";
@@ -250,13 +250,15 @@ const DropdownTmpComp = (function () {
       </ButtonCompWrapper>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.options.propertyView({})}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.interaction}>
               {!children.onlyMenu.getView() && !children.onlyIcon.getView()
                 ? children.onEvent.getPropertyView()
@@ -267,7 +269,7 @@ const DropdownTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" || editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.layout}>
               {children.text.propertyView({ label: trans("label") })}
@@ -290,7 +292,8 @@ const DropdownTmpComp = (function () {
           </>
         )}
       </>
-    ))
+    );
+    })
     .build();
 })();
 

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -21,8 +21,8 @@ import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
-import { EditorContext } from "comps/editorState";
-import React, { useContext, useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
+import React, { useEffect } from "react";
 
 const Link = styled(Button)<{
   $style: LinkStyleType;
@@ -120,13 +120,14 @@ const LinkTmpComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.text.propertyView({ label: trans("text") })}
           </Section>
 
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "logic" || editorModeStatus === "both") && (
             <><Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
@@ -141,7 +142,7 @@ const LinkTmpComp = (function () {
               </Section></>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(editorModeStatus === "layout" || editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
               <Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>

client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

@@ -28,12 +28,11 @@ import React, {
   useEffect,
   useRef,
   useState,
-  useContext,
 } from "react";
 import { arrayStringExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 const Error = styled.div`
   color: #f5222d;
@@ -284,14 +283,16 @@ const ScannerTmpComp = (function () {
       </ButtonCompWrapper>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.text.propertyView({ label: trans("text") })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" ||
+          editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
@@ -315,14 +316,15 @@ const ScannerTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" ||
+          editorModeStatus === "both") && (
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
         )}
       </>
-    ))
+    );
+    })
     .setExposeMethodConfigs(buttonRefMethods)
     .build();
 })();

client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

@@ -24,8 +24,8 @@ import {
 import { styleControl } from "comps/controls/styleControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
-import React, { useContext, useEffect } from "react";
-import { EditorContext } from "comps/editorState"; 
+import React, { useEffect } from "react";
+import { useEditorStore } from "comps/editorStore";
 import { Tooltip } from "antd";
 
 const IconWrapper = styled.div`
@@ -103,7 +103,9 @@ const ToggleTmpComp = (function () {
       </ButtonCompWrapperStyled>
     );
   })
-    .setPropertyViewFn((children) => (
+    .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
+      return (
       <>
         <Section name={sectionNames.basic}>
           {children.value.propertyView({
@@ -112,7 +114,7 @@ const ToggleTmpComp = (function () {
           })}
         </Section>
 
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "logic" || editorModeStatus === "both") && (
           <><Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
@@ -143,8 +145,8 @@ const ToggleTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" ||
-          useContext(EditorContext).editorModeStatus === "both") && (
+        {(editorModeStatus === "layout" ||
+          editorModeStatus === "both") && (
           <>
             <Section name={sectionNames.style}>
               {children.showBorder.propertyView({
@@ -160,7 +162,8 @@ const ToggleTmpComp = (function () {
 
         <Section name={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
       </>
-    ))
+    );
+    })
     .setExposeMethodConfigs(buttonRefMethods)
     .build();
 })();

client/packages/lowcoder/src/comps/comps/carouselComp.tsx

@@ -15,8 +15,7 @@ import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
-import { useContext } from "react";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 
 // TODO: dots at top position needs proper margin (should be the same as bottom position)
 
@@ -84,21 +83,22 @@ let CarouselBasicComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      const editorModeStatus = useEditorStore((state) => state.editorModeStatus);
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.data.propertyView({ label: trans("data") })}
           </Section>
 
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["logic", "both"].includes(editorModeStatus) && (
             <><FormDataPropertyView {...children} />
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {hiddenPropertyView(children)}
               {children.autoPlay.propertyView({ label: trans("carousel.autoPlay") })}
             </Section></>
           )}
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          {["layout", "both"].includes(editorModeStatus) && (
             <><Section name={sectionNames.layout}>
                 {children.showDots.propertyView({ label: trans("carousel.showDots") })}
                 {children.dotPosition.propertyView({

client/packages/lowcoder/src/comps/comps/chatBoxComponent/chatBoxComp.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { Section, sectionNames, controlItem } from "lowcoder-design";
 import { default as Segmented } from "antd/es/segmented";
 import { UICompBuilder, withDefault, stateComp } from "../../generators";
@@ -41,7 +41,7 @@ import {
 } from "comps/controls/styleControlConstants";
 import { RefControl } from "comps/controls/refControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
-import { EditorContext } from "comps/editorState";
+import { useEditorStore } from "comps/editorStore";
 import { trans } from "i18n";
 
 import { ChatBoxView } from "./components/ChatBoxView";
@@ -187,7 +187,7 @@ const avatarStyleOptions = [
 
 const ChatBoxPropertyView = React.memo((props: { children: any }) => {
   const { children } = props;
-  const editorMode = useContext(EditorContext).editorModeStatus;
+  const editorMode = useEditorStore((state) => state.editorModeStatus);
   const [messageStyleSegment, setMessageStyleSegment] = useState<MessageStyleSegment>("own");
   const [avatarStyleSegment, setAvatarStyleSegment] = useState<MessageStyleSegment>("own");