From 18180711c58c5ff215e7376477611fadd81196a3 Mon Sep 17 00:00:00 2001
From: awwit <ignatius.awwit@gmail.com>
Date: Wed, 25 Sep 2024 17:04:48 +0300
Subject: [PATCH 1/3] refactor: add useMemo and useCallback to Editor
 components

---
 .../ComponentBuilder/ComponentBuilder.tsx     |    1 +
 packages/core/src/resourcesUtils.ts           |    3 +-
 packages/core/src/types.ts                    |  375 +++--
 .../design-system/src/ThumbnailButton.tsx     |   68 +-
 packages/design-system/src/Toaster.tsx        |   53 +-
 .../src/ToggleGroup/ToggleGroup.tsx           |  115 +-
 packages/editor/src/CanvasRoot/CanvasRoot.tsx |    8 +-
 packages/editor/src/EasyblocksEditor.tsx      |   14 +-
 packages/editor/src/EasyblocksParent.tsx      |   69 +-
 packages/editor/src/Editor.tsx                | 1218 +++++++++--------
 packages/editor/src/EditorContext.ts          |    5 +-
 .../editor/src/EditorExternalDataProvider.tsx |   30 +-
 packages/editor/src/EditorIframe.tsx          |  104 +-
 packages/editor/src/EditorSidebar.tsx         |   44 +-
 packages/editor/src/EditorTopBar.tsx          |  279 ++--
 packages/editor/src/ModalPicker.tsx           |  151 +-
 packages/editor/src/SidebarFooter.tsx         |   10 +-
 packages/editor/src/inline-settings.tsx       |   26 +-
 packages/editor/src/parseQueryParams.ts       |    8 +-
 .../editor/src/selectionFrame/AddButton.tsx   |  110 +-
 .../src/selectionFrame/SelectionFrame.tsx     |  222 +--
 .../src/tinacms/fields/plugins/LocalFIeld.tsx |   64 +-
 .../tinacms/form-builder/fields-builder.tsx   |   69 +-
 .../utils/createFieldController.ts            |   62 +-
 .../editor/src/tinacms/react-core/use-form.ts |   25 +-
 packages/editor/src/useDataSaver.ts           |   88 +-
 packages/editor/src/useEditorHistory.ts       |   94 +-
 packages/editor/src/useOnClickNTimes.ts       |   29 +-
 packages/editor/src/useWindowKeyDown.ts       |   45 +-
 packages/utils/src/hooks/useForceRerender.ts  |    6 +-
 packages/utils/src/object/dotNotationGet.ts   |   13 +-
 31 files changed, 1827 insertions(+), 1581 deletions(-)

diff --git a/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx b/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
index e81f8232..3aac1426 100644
--- a/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
+++ b/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
@@ -225,6 +225,7 @@ function getCompiledSubcomponents(
   let elements = compiledArray.map((compiledChild, index) =>
     "_component" in compiledChild ? (
       <EditableComponentBuilder
+        key={index}
         compiled={compiledChild}
         index={index}
         length={compiledArray.length}
diff --git a/packages/core/src/resourcesUtils.ts b/packages/core/src/resourcesUtils.ts
index 13a9eb99..1db35901 100644
--- a/packages/core/src/resourcesUtils.ts
+++ b/packages/core/src/resourcesUtils.ts
@@ -6,6 +6,7 @@ import type {
   ExternalReferenceNonEmpty,
   ExternalSchemaProp,
   FetchOutputCompoundResources,
+  FetchResourceResolvedResult,
   NonNullish,
   ResponsiveValue,
 } from "./types";
@@ -50,7 +51,7 @@ export function getResolvedExternalDataValue(
   configId: string,
   fieldName: string,
   value: ExternalReferenceNonEmpty
-) {
+): FetchResourceResolvedResult<NonNullish> | undefined {
   const externalReferenceLocationKey =
     typeof value.id === "string" && value.id.startsWith("$.")
       ? value.id
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index bdc43b1a..023e9333 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -4,29 +4,29 @@ import { Locale } from "./locales";
 
 export type ScalarOrCollection<T> = T | Array<T>;
 
-export type PlaceholderAppearance = {
+export interface PlaceholderAppearance {
   width?: number;
   height?: number;
   aspectRatio?: number;
   label?: string;
-};
+}
 
 export interface ComponentConfigBase<Identifier extends string> {
   _component: Identifier;
   _id: string;
 }
 
-export type NoCodeComponentEntry = {
+export interface NoCodeComponentEntry {
   _component: string; // instance of the component (unique id)
   _id: string;
   [key: string]: any; // props
-};
+}
 
-export type ThemeTokenValue<T> = {
+export interface ThemeTokenValue<T> {
   value: T;
   isDefault: boolean;
   label?: string;
-};
+}
 
 export type Spacing = string; // 10px, 0px, 10vw, etc
 
@@ -34,10 +34,10 @@ export type Font = object;
 
 export type Color = string;
 
-export type TrulyResponsiveValue<T> = {
+export interface TrulyResponsiveValue<T> {
   [key: string]: T | true | undefined;
   $res: true;
-};
+}
 
 export type ResponsiveValue<T> = T | TrulyResponsiveValue<T>;
 
@@ -49,12 +49,12 @@ export type ThemeColor = ResponsiveValue<Color>;
 
 export type ThemeFont = ResponsiveValue<{ [key: string]: any }>;
 
-export type ButtonCustomComponent = CustomComponentShared & {
+export interface ButtonCustomComponent extends CustomComponentShared {
   builtinProps?: {
     label?: "on" | "off";
     symbol?: "on" | "off" | "optional";
   };
-};
+}
 
 export type StringSchemaProp = ValueSchemaProp<"string", string, "optional"> &
   SchemaPropParams<{
@@ -131,15 +131,13 @@ export type StringTokenSchemaProp = ValueSchemaProp<
     true
   >;
 
-export type SpaceSchemaProp = ValueSchemaProp<
-  "space",
-  ResponsiveValue<TokenValue<Spacing>>,
-  "forced"
-> &
-  SchemaPropParams<{
-    prefix?: string;
-    autoConstant?: number;
-  }>;
+export interface SpaceSchemaProp
+  extends ValueSchemaProp<
+      "space",
+      ResponsiveValue<TokenValue<Spacing>>,
+      "forced"
+    >,
+    SchemaPropParams<{ prefix?: string; autoConstant?: number }> {}
 
 export type FontSchemaProp = ValueSchemaProp<
   "font",
@@ -159,24 +157,24 @@ export type PassedField =
   | { name: string; label: string; showWhen?: any; group?: string }
   | string;
 
-export type ComponentSchemaProp = SchemaPropShared<"component"> & {
+export interface ComponentSchemaProp extends SchemaPropShared<"component"> {
   accepts: string[];
   picker?: ComponentPickerType;
   required?: boolean;
   noInline?: boolean;
   placeholderAppearance?: PlaceholderAppearance;
-};
+}
 
-export type ComponentCollectionSchemaProp =
-  SchemaPropShared<"component-collection"> & {
-    accepts: string[];
-    picker?: ComponentPickerType;
-    hideFields?: string[];
-    itemFields?: SchemaProp[];
-    passFields?: PassedField[];
-    noInline?: boolean;
-    placeholderAppearance?: PlaceholderAppearance;
-  };
+export interface ComponentCollectionSchemaProp
+  extends SchemaPropShared<"component-collection"> {
+  accepts: string[];
+  picker?: ComponentPickerType;
+  hideFields?: string[];
+  itemFields?: SchemaProp[];
+  passFields?: PassedField[];
+  noInline?: boolean;
+  placeholderAppearance?: PlaceholderAppearance;
+}
 
 export type ComponentCollectionLocalisedSchemaProp = Omit<
   ComponentCollectionSchemaProp,
@@ -187,14 +185,15 @@ export type ComponentCollectionLocalisedSchemaProp = Omit<
   placeholderAppearance?: PlaceholderAppearance;
 };
 
-export type TextSchemaProp = ValueSchemaProp<
-  "text",
-  LocalTextReference | ExternalReference | string,
-  "never"
-> & {
+export interface TextSchemaProp
+  extends ValueSchemaProp<
+    "text",
+    LocalTextReference | ExternalReference | string,
+    "never"
+  > {
   normalize?: (x: string) => string | null;
   [key: string]: any;
-};
+}
 
 export type PositionVertical = "top" | "center" | "bottom";
 
@@ -208,14 +207,15 @@ export type PositionSchemaProp = ValueSchemaProp<
   "forced"
 >;
 
-export type ExternalSchemaProp = ValueSchemaProp<
-  string & Record<never, never>,
-  ExternalReference,
-  "optional"
-> & {
+export interface ExternalSchemaProp
+  extends ValueSchemaProp<
+    string & Record<never, never>,
+    ExternalReference,
+    "optional"
+  > {
   params?: ExternalParams;
   optional?: boolean;
-};
+}
 
 export type LocalSchemaProp = ValueSchemaProp<
   string & Record<never, never>,
@@ -223,14 +223,11 @@ export type LocalSchemaProp = ValueSchemaProp<
   "optional"
 >;
 
-export type TokenSchemaProp = ValueSchemaProp<
-  string & Record<never, never>,
-  any,
-  "forced"
-> &
-  SchemaPropParams<{
-    extraValues: Array<any | { value: any; label: string }>;
-  }>;
+export interface TokenSchemaProp
+  extends ValueSchemaProp<string & Record<never, never>, any, "forced">,
+    SchemaPropParams<{
+      extraValues: Array<any | { value: any; label: string }>;
+    }> {}
 
 export type SchemaProp =
   | StringSchemaProp
@@ -267,31 +264,31 @@ export type AnyValueSchemaProp =
   | PositionSchemaProp
   | ExternalSchemaProp;
 
-type CustomComponentShared = {
+interface CustomComponentShared {
   id: string;
   hidden?: boolean;
   schema: SchemaProp[];
   label?: string;
   previewImage?: string;
-};
+}
 
-export type ConfigDeviceRange = {
+export interface ConfigDeviceRange {
   startsFrom?: number;
   w?: number;
   h?: number | null;
   hidden?: boolean;
-};
+}
 
-export type ConfigDevices = {
+export interface ConfigDevices {
   xs?: ConfigDeviceRange;
   sm?: ConfigDeviceRange;
   md?: ConfigDeviceRange;
   lg?: ConfigDeviceRange;
   xl?: ConfigDeviceRange;
   "2xl"?: ConfigDeviceRange;
-};
+}
 
-export type UserDefinedTemplate = {
+export interface UserDefinedTemplate {
   id: string;
   label: string;
   thumbnail?: string;
@@ -300,9 +297,9 @@ export type UserDefinedTemplate = {
   isUserDefined: true;
   width?: number;
   widthAuto?: boolean;
-};
+}
 
-export type InternalTemplate = {
+export interface InternalTemplate {
   id: string;
   label?: string;
   thumbnail?: string;
@@ -311,71 +308,73 @@ export type InternalTemplate = {
   isUserDefined?: false;
   width?: number;
   widthAuto?: boolean;
-};
+}
 
 export type Template = InternalTemplate | UserDefinedTemplate;
 
-export type ConfigTokenValue<T> = {
+export interface ConfigTokenValue<T> {
   id: string;
   label?: string;
   value: T;
   isDefault?: boolean;
-};
+}
 
 export type ExternalParams = Record<string, unknown>;
 
-export type ContextParams = {
+export interface ContextParams {
   locale: string;
   [key: string]: any;
-};
+}
 
-export type WidgetComponentProps<Identifier extends NonNullish = NonNullish> = {
+export interface WidgetComponentProps<
+  Identifier extends NonNullish = NonNullish
+> {
   id: ExternalReference<Identifier>["id"];
   onChange: (newId: ExternalReference<Identifier>["id"]) => void;
   params?: Record<string, any>;
-};
+}
 
-export type InlineTypeWidgetComponentProps<
+export interface InlineTypeWidgetComponentProps<
   Type extends NonNullish = NonNullish
-> = {
+> {
   value: Type;
   onChange: (newValue: Type) => void;
   params?: Record<string, any>;
-};
+}
 
 export type TokenTypeWidgetComponentProps<
   Type extends NonNullish = NonNullish
 > = InlineTypeWidgetComponentProps<Type>;
 
-export type Widget = {
+export interface Widget {
   id: string;
   label: string;
-};
+}
 
-export type ExternalDefinition = {
+export interface ExternalDefinition {
   widgets: Array<Widget>;
-};
+}
 
-export type LocalizedText = {
+export interface LocalizedText {
   [locale: string]: string;
-};
+}
 
-export type NoCodeComponentStylesFunctionInput<
+export interface NoCodeComponentStylesFunctionInput<
   Values extends Record<string, any> = Record<string, any>,
   Params extends Record<string, any> = Record<string, any>
-> = {
+> {
   values: Values;
   params: { $width: number; $widthAuto: boolean } & Params;
   device: DeviceRange;
   isEditing: boolean;
-};
+}
 
 export type InferNoCodeComponentStylesFunctionInput<T> =
   T extends NoCodeComponentDefinition<infer Values, infer Params>
     ? NoCodeComponentStylesFunctionInput<Values, Params>
     : never;
 
-export type NoCodeComponentStylesFunctionResult = {
+export interface NoCodeComponentStylesFunctionResult {
   props?: Record<string, any>;
   components?: Record<
     string,
@@ -388,7 +387,7 @@ export type NoCodeComponentStylesFunctionResult = {
     }
   >;
   styled?: Record<string, ScalarOrCollection<Record<string, any>>>;
-};
+}
 
 export type NoCodeComponentStylesFunction<
   Values extends Record<string, any> = Record<string, any>,
@@ -397,15 +396,15 @@ export type NoCodeComponentStylesFunction<
   input: NoCodeComponentStylesFunctionInput<Values, Params>
 ) => NoCodeComponentStylesFunctionResult;
 
-export type NoCodeComponentEditingFunctionInput<
+export interface NoCodeComponentEditingFunctionInput<
   Values extends Record<string, any> = Record<string, any>,
   Params extends Record<string, any> = Record<string, any>
-> = {
+> {
   values: Values;
   params: Params;
   editingInfo: EditingInfo;
   device: DeviceRange;
-};
+}
 
 export type NoCodeComponentEditingFunction<
   Values extends Record<string, any> = Record<string, any>,
@@ -414,14 +413,14 @@ export type NoCodeComponentEditingFunction<
   input: NoCodeComponentEditingFunctionInput<Values, Params>
 ) => NoCodeComponentEditingFunctionResult;
 
-export type NoCodeComponentAutoFunctionInput<
+export interface NoCodeComponentAutoFunctionInput<
   Values extends Record<string, any> = Record<string, any>,
   Params extends Record<string, any> = Record<string, any>
-> = {
+> {
   values: { [key in keyof Values]: ResponsiveValue<Values[key]> };
   params: { [key in keyof Params]: ResponsiveValue<Params[key]> };
   devices: Devices;
-};
+}
 
 export type NoCodeComponentAutoFunction<
   Values extends Record<string, any> = Record<string, any>,
@@ -432,16 +431,16 @@ export type NoCodeComponentAutoFunction<
   }
 ) => any;
 
-export type RootParameter = {
+export interface RootParameter {
   prop: string;
   label: string;
   widgets: Array<Widget>;
-};
+}
 
-export type NoCodeComponentDefinition<
+export interface NoCodeComponentDefinition<
   Values extends Record<string, any> = Record<string, any>,
   Params extends Record<string, any> = Record<string, any>
-> = {
+> {
   id: string;
   schema: Array<SchemaProp>;
   type?: string | string[];
@@ -458,12 +457,12 @@ export type NoCodeComponentDefinition<
   }) => SidebarPreviewVariant | undefined;
   allowSave?: boolean;
   rootParams?: RootParameter[];
-};
+}
 
 /**
  * @internal
  */
-type ConfigTokens = {
+interface ConfigTokens {
   aspectRatios: string;
   boxShadows: string;
   containerWidths: number;
@@ -471,23 +470,23 @@ type ConfigTokens = {
   fonts: ThemeFont;
   icons: string;
   space: ThemeSpace;
-};
+}
 
-export type InlineTypeDefinition<Value extends NonNullish = any> = {
+export interface InlineTypeDefinition<Value extends NonNullish = any> {
   widget: Widget;
   responsiveness?: "always" | "optional" | "never";
   type: "inline";
   defaultValue: Value;
   validate?: (value: any) => boolean;
-};
+}
 
-export type ExternalTypeDefinition = {
+export interface ExternalTypeDefinition {
   widgets?: Array<Widget>;
   responsiveness?: "always" | "optional" | "never";
   type: "external";
-};
+}
 
-export type TokenTypeDefinition<Value extends NonNullish = any> = {
+export interface TokenTypeDefinition<Value extends NonNullish = any> {
   widget?: Widget;
   responsiveness?: "always" | "optional" | "never";
   type: "token";
@@ -496,7 +495,7 @@ export type TokenTypeDefinition<Value extends NonNullish = any> = {
   extraValues?: Array<Value | { value: Value; label: string }>;
   allowCustom?: boolean;
   validate?: (value: any) => boolean;
-};
+}
 
 export type CustomTypeDefinition =
   | InlineTypeDefinition
@@ -507,13 +506,13 @@ export type CustomTypeDefinition =
  * Backend types
  */
 
-export type Document = {
+export interface Document {
   id: string;
   version: number;
   entry: NoCodeComponentEntry;
-};
+}
 
-export type Backend = {
+export interface Backend {
   documents: {
     get: (payload: { id: string; locale?: string }) => Promise<Document>;
     create: (payload: Omit<Document, "id" | "version">) => Promise<Document>;
@@ -534,13 +533,13 @@ export type Backend = {
     }) => Promise<Omit<UserDefinedTemplate, "entry">>;
     delete: (payload: { id: string }) => Promise<void>;
   };
-};
+}
 
 /**
  * Config
  */
 
-export type Config = {
+export interface Config {
   backend: Backend;
   components?: Array<NoCodeComponentDefinition<any, any>>;
   devices?: ConfigDevices;
@@ -554,9 +553,9 @@ export type Config = {
   } & {
     [key: string & Record<never, never>]: Array<ConfigTokenValue<any>>;
   };
-};
+}
 
-export type SchemaPropShared<Type extends string> = {
+export interface SchemaPropShared<Type extends string> {
   type: Type;
   prop: string;
   label?: string;
@@ -572,7 +571,7 @@ export type SchemaPropShared<Type extends string> = {
   description?: string;
   group?: string;
   layout?: "row" | "column";
-};
+}
 
 type ValueSchemaProp<
   Type extends string,
@@ -593,13 +592,9 @@ type ValueSchemaProp<
 export type SchemaPropParams<
   T extends Record<string, unknown>,
   Required extends boolean = false
-> = Required extends true
-  ? {
-      params: T;
-    }
-  : { params?: T };
+> = Required extends true ? { params: T } : { params?: T };
 
-export type DeviceRange = {
+export interface DeviceRange {
   id: string;
   w: number;
   h: number | null;
@@ -607,7 +602,7 @@ export type DeviceRange = {
   hidden?: boolean;
   label?: string;
   isMain?: boolean;
-};
+}
 
 export type Devices = DeviceRange[];
 
@@ -618,7 +613,7 @@ export type NoCodeComponentChangeFunction = (arg: {
   valuesAfterAuto: Record<string, any>;
 }) => Record<string, any> | undefined;
 
-export type SidebarPreviewVariant = {
+export interface SidebarPreviewVariant {
   description?: string;
   thumbnail?:
     | {
@@ -626,9 +621,9 @@ export type SidebarPreviewVariant = {
         src: string;
       }
     | { type: "color"; color: string };
-};
+}
 
-export type ComponentDefinitionShared<Identifier extends string = string> = {
+export interface ComponentDefinitionShared<Identifier extends string = string> {
   id: Identifier;
   label?: string;
   type?: string | string[];
@@ -645,15 +640,15 @@ export type ComponentDefinitionShared<Identifier extends string = string> = {
 
   hideTemplates?: boolean;
   allowSave?: boolean;
-};
+}
 
-export type NoCodeComponentProps = {
+export interface NoCodeComponentProps {
   __easyblocks: {
     id: string;
     isEditing: boolean;
     isSelected?: boolean;
   };
-};
+}
 
 export type SerializedRenderableComponentDefinition =
   ComponentDefinitionShared & {
@@ -666,36 +661,36 @@ export type SerializedLinkComponentDefinition = ComponentDefinitionShared;
 
 export type SerializedTextModifierDefinition = ComponentDefinitionShared;
 
-export type SerializedComponentDefinitions = {
+export interface SerializedComponentDefinitions {
   components: SerializedRenderableComponentDefinition[];
   actions: SerializedActionComponentDefinition[];
   links: SerializedLinkComponentDefinition[];
   textModifiers: SerializedTextModifierDefinition[];
-};
+}
 
 export type SerializedComponentDefinition =
   | SerializedRenderableComponentDefinition
   | SerializedActionComponentDefinition
   | SerializedLinkComponentDefinition;
 
-export type NonEmptyRenderableContent = {
+export interface NonEmptyRenderableContent {
   renderableContent: CompiledShopstoryComponentConfig;
   configAfterAuto?: any;
-};
+}
 
-export type EmptyRenderableContent = {
+export interface EmptyRenderableContent {
   renderableContent: null;
-};
+}
 
 export type RenderableContent =
   | EmptyRenderableContent
   | NonEmptyRenderableContent;
 
-export type RenderableDocument = {
+export interface RenderableDocument {
   renderableContent: CompiledShopstoryComponentConfig | null;
   meta: CompilationMetadata;
   configAfterAuto?: NoCodeComponentEntry;
-};
+}
 
 export type AnyField = Field & { [key: string]: any };
 
@@ -741,26 +736,27 @@ export type FieldPortal =
       hidden?: boolean;
     };
 
-export type CompiledComponentConfigBase<
+export interface CompiledComponentConfigBase<
   Identifier extends string = string,
   Props extends Record<string, any> = Record<string, any>
-> = {
+> {
   _component: Identifier; // instance of the component (unique id)
   _id: string;
   props: Props;
-};
+}
 
-export type EditingInfoBase = {
+export interface EditingInfoBase {
   direction?: "horizontal" | "vertical";
   noInline?: boolean;
-};
+}
 
-export type WidthInfo = {
+export interface WidthInfo {
   auto: TrulyResponsiveValue<boolean>;
   width: TrulyResponsiveValue<number>;
-};
+}
 
-export type CompiledCustomComponentConfig = CompiledComponentConfigBase & {
+export interface CompiledCustomComponentConfig
+  extends CompiledComponentConfigBase {
   components: {
     [key: string]: (CompiledComponentConfig | ReactElement)[];
   };
@@ -773,31 +769,30 @@ export type CompiledCustomComponentConfig = CompiledComponentConfigBase & {
       };
     };
   };
-};
+}
 
-export type CompiledStyled = {
+export interface CompiledStyled {
   [key: string]: any;
-};
+}
 
-export type CompiledShopstoryComponentConfig = CompiledCustomComponentConfig & {
-  styled: {
-    [key: string]: CompiledStyled;
-  };
-};
+export interface CompiledShopstoryComponentConfig
+  extends CompiledCustomComponentConfig {
+  styled: Record<string, CompiledStyled>;
+}
 
 export type CompiledComponentConfig = CompiledShopstoryComponentConfig;
 
-export type ComponentPlaceholder = {
+export interface ComponentPlaceholder {
   width: number;
   height: number;
   label?: string;
-};
+}
 
-export type EditorSidebarPreviewOptions = {
+export interface EditorSidebarPreviewOptions {
   breakpointIndex: string;
   devices: Devices;
   contextParams: ContextParams;
-};
+}
 
 export interface ConfigModel {
   id: string;
@@ -807,22 +802,22 @@ export interface ConfigModel {
   created_at: string;
 }
 
-export type ExternalWithSchemaProp = {
+export interface ExternalWithSchemaProp {
   id: string;
   externalReference: ExternalReference;
   schemaProp: ExternalSchemaProp;
-};
+}
 
-export type CompilationMetadata = {
+export interface CompilationMetadata {
   vars: {
     devices: Devices;
     locale: string;
     definitions: SerializedComponentDefinitions;
     [key: string]: any;
   };
-};
+}
 
-export type CompilerModule = {
+export interface CompilerModule {
   compile: (
     content: NoCodeComponentEntry,
     config: Config,
@@ -832,6 +827,7 @@ export type CompilerModule = {
     configAfterAuto?: any;
     meta: CompilationMetadata;
   };
+
   /**
    * We need findResources function that also comes from the cloud.
    * Without it we would have to analyse the config in ShopstoryClient in order to find resources to be fetched.
@@ -842,56 +838,59 @@ export type CompilerModule = {
     config: Config,
     contextParams: ContextParams
   ) => ExternalWithSchemaProp[];
+
   validate: (input: unknown) =>
     | {
         isValid: true;
         input: Document | NoCodeComponentEntry | null | undefined;
       }
     | { isValid: false };
-};
+}
 
-export type EditingField = {
+export interface EditingField {
   type: "field";
   path: string;
   label?: string;
   group?: string;
   visible?: boolean;
-};
+}
 
-export type EditingComponentFields = {
+export interface EditingComponentFields {
   type: "fields";
   path: string;
   filters?: {
     group?: ScalarOrCollection<string>;
   };
-};
+}
 
 export type AnyEditingField = EditingField | EditingComponentFields;
 
-export type ChildComponentEditingInfo = {
+export interface ChildComponentEditingInfo {
   selectable?: boolean;
   direction?: "horizontal" | "vertical";
   fields: Array<EditingField>;
-};
+}
 
-export type EditingInfo = {
+export interface EditingInfo {
   fields: Array<EditingField>;
   components: Record<string, ScalarOrCollection<ChildComponentEditingInfo>>;
-};
+}
 
-export type NoCodeComponentEditingFunctionResult = {
+export interface NoCodeComponentEditingFunctionResult {
   fields?: Array<AnyEditingField>;
   components?: {
     [field: string]: ScalarOrCollection<PartialDeep<ChildComponentEditingInfo>>;
   };
-};
+}
 
-type FetchResourceResolvedResult<T> = {
+export interface FetchResourceResolvedResult<T> {
   type: string & Record<never, never>;
   value: T;
-};
+}
 
-type FetchResourceRejectedResult = { error: Error };
+interface FetchResourceRejectedResult {
+  error: Error;
+}
 
 // {} in TS means any non nullish value and it's used on purpose here
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -903,14 +902,14 @@ export type FetchResourceResult<T extends NonNullish = NonNullish> =
 
 export type FetchOutputBasicResources = Record<string, FetchResourceResult>;
 
-export type FetchCompoundResourceResultValue<
+export interface FetchCompoundResourceResultValue<
   Type extends string = string,
   Value extends NonNullish = NonNullish
-> = {
+> {
   type: Type;
   value: Value;
   label?: string;
-};
+}
 
 export type FetchCompoundTextResourceResultValue =
   FetchCompoundResourceResultValue<"text", string>;
@@ -921,14 +920,14 @@ export type FetchCompoundResourceResultValues = Record<
   | FetchCompoundResourceResultValue<string & Record<never, never>, NonNullish>
 >;
 
-export type ExternalDataCompoundResourceResolvedResult = {
+export interface ExternalDataCompoundResourceResolvedResult {
   type: "object";
   value: FetchCompoundResourceResultValues;
-};
+}
 
-export type ExternalDataCompoundResourceRejectedResult = {
+export interface ExternalDataCompoundResourceRejectedResult {
   error: Error;
-};
+}
 
 export type FetchOutputCompoundResources = Record<
   string,
@@ -941,11 +940,11 @@ export type FetchOutputResources = Record<
   (FetchOutputBasicResources | FetchOutputCompoundResources)[string]
 >;
 
-export type RequestedExternalDataValue = {
+export interface RequestedExternalDataValue {
   id: ExternalReference["id"];
   widgetId: string;
   params?: ExternalParams;
-};
+}
 
 export type RequestedExternalData = Record<string, RequestedExternalDataValue>;
 
@@ -954,11 +953,11 @@ export type ExternalData = Record<
   (FetchOutputBasicResources | FetchOutputCompoundResources)[string]
 >;
 
-export type LocalReference<Value = unknown> = {
+export interface LocalReference<Value = unknown> {
   id: string;
   value: Value;
   widgetId: string;
-};
+}
 
 export type LocalTextReference = Omit<
   LocalReference<LocalizedText>,
@@ -970,30 +969,30 @@ export type CompiledLocalTextReference = Omit<
   "id" | "widgetId"
 > & { id: `local.${string}`; widgetId: "@easyblocks/local-text" };
 
-export type ExternalReferenceEmpty = {
+export interface ExternalReferenceEmpty {
   id: null;
   widgetId: string;
-};
+}
 
-export type ExternalReferenceNonEmpty<
+export interface ExternalReferenceNonEmpty<
   Identifier extends NonNullish = NonNullish
-> = {
+> {
   id: Identifier;
   widgetId: string;
   key?: string;
-};
+}
 
 export type ExternalReference<Identifier extends NonNullish = NonNullish> =
   | ExternalReferenceEmpty
   | ExternalReferenceNonEmpty<Identifier>;
 
-export type LocalValue<T = any> = {
+export interface LocalValue<T = any> {
   value: T;
   widgetId: string;
-};
+}
 
-export type TokenValue<T = any> = {
+export interface TokenValue<T = any> {
   value: T;
   tokenId?: string;
   widgetId?: string;
-};
+}
diff --git a/packages/design-system/src/ThumbnailButton.tsx b/packages/design-system/src/ThumbnailButton.tsx
index 321d0bae..c4071b2c 100644
--- a/packages/design-system/src/ThumbnailButton.tsx
+++ b/packages/design-system/src/ThumbnailButton.tsx
@@ -5,30 +5,30 @@ import { ButtonGhost } from "./buttons";
 import { Icons } from "./icons";
 import { Typography } from "./Typography";
 
-export type ColorThumbnail = {
+export interface ColorThumbnail {
   type: "color";
   color: string;
-};
+}
 
-export type ImageThumbnail = {
+export interface ImageThumbnail {
   type: "image";
   src: string;
-};
+}
 
-export type IconThumbnail = {
+export interface IconThumbnail {
   type: "icon";
   icon: "link" | "grid_3x3";
-};
+}
 
 export type ThumbnailType = ColorThumbnail | ImageThumbnail | IconThumbnail;
 
-export type ThumbnailButtonProps = {
+export interface ThumbnailButtonProps {
   onClick?: () => void;
   label: string;
   description?: string;
   thumbnail?: ThumbnailType;
   disabled?: boolean;
-};
+}
 
 const Preview = styled.div`
   display: flex;
@@ -77,6 +77,8 @@ const Labels = styled.div`
   display: grid;
 `;
 
+const containerStyle = { display: "grid", width: "100%" };
+
 export function ThumbnailButton({
   onClick,
   label,
@@ -84,27 +86,9 @@ export function ThumbnailButton({
   thumbnail,
   disabled,
 }: ThumbnailButtonProps) {
-  let preview: JSX.Element;
-
-  if (thumbnail?.type === "image") {
-    preview = <PreviewImage src={thumbnail.src} aria-hidden="true" />;
-  } else if (thumbnail?.type === "color") {
-    preview = <SolidColorPreview color={thumbnail.color} />;
-  } else if (thumbnail?.type === "icon") {
-    const ComponentIcon =
-      thumbnail.icon === "link"
-        ? Icons.Link
-        : thumbnail.icon === "grid_3x3"
-        ? Icons.Grid3x3
-        : Icons.Link;
-    preview = <ComponentIcon size={16} />;
-  } else {
-    preview = <SolidColorPreview color={"transparent"} />;
-  }
-
   const content = (
     <ContentRoot>
-      <Preview>{preview}</Preview>
+      <Preview>{renderPreviewElementByThumbnail(thumbnail)}</Preview>
       <Labels>
         <Typography variant="label" isTruncated>
           {label}
@@ -123,10 +107,36 @@ export function ThumbnailButton({
   }
 
   return (
-    <div style={{ display: "grid", width: "100%" }}>
-      <ButtonGhost onClick={onClick} height={"32px"} noPadding={true}>
+    <div style={containerStyle}>
+      <ButtonGhost onClick={onClick} height="32px" noPadding={true}>
         {content}
       </ButtonGhost>
     </div>
   );
 }
+
+function renderPreviewElementByThumbnail(
+  thumbnail?: ThumbnailType
+): JSX.Element {
+  switch (thumbnail?.type) {
+    case "image":
+      return <PreviewImage src={thumbnail.src} aria-hidden="true" />;
+
+    case "color":
+      return <SolidColorPreview color={thumbnail.color} />;
+
+    case "icon": {
+      const ComponentIcon =
+        thumbnail.icon === "link"
+          ? Icons.Link
+          : thumbnail.icon === "grid_3x3"
+          ? Icons.Grid3x3
+          : Icons.Link;
+
+      return <ComponentIcon size={16} />;
+    }
+
+    default:
+      return <SolidColorPreview color="transparent" />;
+  }
+}
diff --git a/packages/design-system/src/Toaster.tsx b/packages/design-system/src/Toaster.tsx
index 60029279..31d6a88f 100644
--- a/packages/design-system/src/Toaster.tsx
+++ b/packages/design-system/src/Toaster.tsx
@@ -1,30 +1,33 @@
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
+
 import { Fonts } from "./fonts";
 
-export { Toaster };
+export { Toaster } from "react-hot-toast";
 
-export function useToaster() {
-  const style = {
-    borderRadius: "4px",
-    ...Fonts.body,
-  };
+const style = {
+  borderRadius: "4px",
+  ...Fonts.body,
+};
 
-  return {
-    notify: (message: string) => {
-      toast(message, {
-        style,
-      });
-    },
-    success: (message: string, options: { duration?: number } = {}) => {
-      toast.success(message, {
-        style,
-        duration: options.duration,
-      });
-    },
-    error: (message: string) => {
-      toast.error(message, {
-        style,
-      });
-    },
-  };
+const toaster = Object.freeze({
+  notify(message: string) {
+    toast(message, {
+      style,
+    });
+  },
+  success(message: string, options: { duration?: number } = {}) {
+    toast.success(message, {
+      style,
+      duration: options.duration,
+    });
+  },
+  error(message: string) {
+    toast.error(message, {
+      style,
+    });
+  },
+});
+
+export function useToaster() {
+  return toaster;
 }
diff --git a/packages/design-system/src/ToggleGroup/ToggleGroup.tsx b/packages/design-system/src/ToggleGroup/ToggleGroup.tsx
index c050b188..3a43d234 100644
--- a/packages/design-system/src/ToggleGroup/ToggleGroup.tsx
+++ b/packages/design-system/src/ToggleGroup/ToggleGroup.tsx
@@ -1,69 +1,78 @@
-import React, { forwardRef, ReactNode } from "react";
+import React, { forwardRef, ReactNode, memo } from "react";
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+
 import { Colors } from "../colors";
 
-function ToggleGroup(props: {
+interface ToggleGroupProps {
   children: ReactNode;
   value: string;
   onChange: (value: string) => void;
-}) {
-  return (
-    <RadixToggleGroup.Root
-      type="single"
-      value={props.value}
-      onValueChange={props.onChange}
-      css={`
-        display: flex;
-        gap: 4px;
-        flex-wrap: nowrap;
-      `}
-    >
-      {props.children}
-    </RadixToggleGroup.Root>
-  );
 }
 
-const ToggleGroupItem = forwardRef<
-  HTMLButtonElement,
-  { value: string; children: ReactNode }
->(function ToggleGroupItem({ value, children, ...props }, forwardedRef) {
-  return (
-    <RadixToggleGroup.Item
-      value={value}
-      css={`
-        all: unset;
-        box-sizing: border-box;
-        height: 28px;
-        width: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: transparent;
+const ToggleGroup = memo<ToggleGroupProps>(
+  ({ value, children, onChange }): JSX.Element => {
+    return (
+      <RadixToggleGroup.Root
+        type="single"
+        value={value}
+        onValueChange={onChange}
+        css={`
+          display: flex;
+          gap: 4px;
+          flex-wrap: nowrap;
+        `}
+      >
+        {children}
+      </RadixToggleGroup.Root>
+    );
+  }
+);
+
+interface ToggleGroupItemProps {
+  value: string;
+  children: ReactNode;
+}
+
+const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  function ToggleGroupItem({ value, children, ...props }, forwardedRef) {
+    return (
+      <RadixToggleGroup.Item
+        value={value}
+        css={`
+          all: unset;
+          box-sizing: border-box;
+          height: 28px;
+          width: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: transparent;
 
-        &[aria-checked="true"] {
-          background-color: ${Colors.black10};
-        }
+          &[aria-checked="true"] {
+            background-color: ${Colors.black10};
+          }
 
-        border-radius: 2px;
+          border-radius: 2px;
 
-        @media (hover: hover) {
-          cursor: pointer;
+          @media (hover: hover) {
+            cursor: pointer;
 
-          &:hover {
-            box-shadow: 0 0 0 1px ${Colors.black10};
+            &:hover {
+              box-shadow: 0 0 0 1px ${Colors.black10};
+            }
           }
-        }
 
-        & svg {
-          flex-shrink: 0;
-        }
-      `}
-      ref={forwardedRef}
-      {...props}
-    >
-      {children}
-    </RadixToggleGroup.Item>
-  );
-});
+          & svg {
+            flex-shrink: 0;
+          }
+        `}
+        ref={forwardedRef}
+        {...props}
+      >
+        {children}
+      </RadixToggleGroup.Item>
+    );
+  }
+);
 
 export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/editor/src/CanvasRoot/CanvasRoot.tsx b/packages/editor/src/CanvasRoot/CanvasRoot.tsx
index fc0f0b83..8997b028 100644
--- a/packages/editor/src/CanvasRoot/CanvasRoot.tsx
+++ b/packages/editor/src/CanvasRoot/CanvasRoot.tsx
@@ -1,11 +1,11 @@
 import React, { ReactNode } from "react";
 import { useEditorGlobalKeyboardShortcuts } from "../useEditorGlobalKeyboardShortcuts";
 
-type CanvasRootProps = {
+interface CanvasRootProps {
   children: ReactNode;
-};
+}
 
-function CanvasRoot(props: CanvasRootProps) {
+export function CanvasRoot(props: CanvasRootProps) {
   const { editorContext } = window.parent.editorWindowAPI;
 
   useEditorGlobalKeyboardShortcuts(editorContext);
@@ -159,5 +159,3 @@ const globalEditorRendererStyles = `
       transform: translateX(-100%);
   }
 `;
-
-export { CanvasRoot };
diff --git a/packages/editor/src/EasyblocksEditor.tsx b/packages/editor/src/EasyblocksEditor.tsx
index b074b7e5..defa2f3b 100644
--- a/packages/editor/src/EasyblocksEditor.tsx
+++ b/packages/editor/src/EasyblocksEditor.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo, memo } from "react";
+
 import { EasyblocksEditorProps } from "./EasyblocksEditorProps";
 import { EasyblocksParent } from "./EasyblocksParent";
 import { EasyblocksCanvas } from "./EditorChildWindow";
@@ -6,7 +7,7 @@ import { PreviewRenderer } from "./PreviewRenderer";
 import { addDebugToEditorProps } from "./debug/addDebugToEditorProps";
 import { parseQueryParams } from "./parseQueryParams";
 
-export function EasyblocksEditor(props: EasyblocksEditorProps) {
+export const EasyblocksEditor = memo((props: EasyblocksEditorProps) => {
   const [selectedWindow, setSelectedWindow] = useState<
     "parent" | "child" | "preview" | null
   >(null);
@@ -45,11 +46,16 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
     }
   }, []);
 
+  const queryParams = useMemo(
+    () => parseQueryParams(window.location.search),
+    [window.location.search]
+  );
+
   if (!selectedWindow) {
     return null;
   }
 
-  if (parseQueryParams().debug) {
+  if (queryParams.debug) {
     props = addDebugToEditorProps(props);
   }
 
@@ -73,4 +79,4 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
       {selectedWindow === "preview" && <PreviewRenderer {...props} />}
     </>
   );
-}
+});
diff --git a/packages/editor/src/EasyblocksParent.tsx b/packages/editor/src/EasyblocksParent.tsx
index c576f3bb..9afd4ec1 100644
--- a/packages/editor/src/EasyblocksParent.tsx
+++ b/packages/editor/src/EasyblocksParent.tsx
@@ -11,8 +11,9 @@ import {
   TooltipProvider,
 } from "@easyblocks/design-system";
 import isPropValid from "@emotion/is-prop-valid";
-import React, { ComponentType } from "react";
+import React, { ComponentType, useMemo, memo } from "react";
 import { ShouldForwardProp, StyleSheetManager } from "styled-components";
+
 import { Editor } from "./Editor";
 import { ColorTokenWidget } from "./sidebar/ColorTokenWidget";
 import { GlobalStyles } from "./tinacms/styles";
@@ -24,7 +25,7 @@ import { TemplatePicker } from "./TemplatePicker";
 import { SectionPickerModal } from "./SectionPicker";
 import { SearchableSmallPickerModal } from "./SearchableSmallPickerModal";
 
-type EasyblocksParentProps = {
+interface EasyblocksParentProps {
   config: Config;
   externalData: FetchOutputResources;
   onExternalDataChange: ExternalDataChangeHandler;
@@ -35,7 +36,7 @@ type EasyblocksParentProps = {
   >;
   components?: Record<string, ComponentType<any>>;
   pickers?: Record<string, TemplatePicker>;
-};
+}
 
 const shouldForwardProp: ShouldForwardProp<"web"> = (propName, target) => {
   if (typeof target === "string") {
@@ -58,26 +59,51 @@ const builinPickers: EasyblocksParentProps["pickers"] = {
   "large-3": SectionPickerModal,
 };
 
-export function EasyblocksParent(props: EasyblocksParentProps) {
-  const editorSearchParams = parseQueryParams();
+function getModalContainer() {
+  return document.querySelector("#modalContainer");
+}
+
+const modalStyle = {
+  position: "fixed",
+  left: 0,
+  top: 0,
+  zIndex: 100000,
+} as const;
+const toasterStyle = { zIndex: 100100 };
+
+export const EasyblocksParent = memo<EasyblocksParentProps>((props) => {
+  const editorSearchParams = useMemo(
+    () => parseQueryParams(window.location.search),
+    [window.location.search]
+  );
+
+  const widgets = useMemo(() => {
+    return {
+      ...builtinWidgets,
+      ...props.widgets,
+    };
+  }, [props.widgets]);
+
+  const pickers = useMemo(() => {
+    return {
+      ...builinPickers,
+      ...props.pickers,
+    };
+  }, [props.pickers]);
 
   return (
     <StyleSheetManager
       shouldForwardProp={shouldForwardProp}
       enableVendorPrefixes
     >
-      <ModalContext.Provider
-        value={() => {
-          return document.querySelector("#modalContainer");
-        }}
-      >
+      <ModalContext.Provider value={getModalContainer}>
         <GlobalStyles />
+
         <GlobalModalStyles />
+
         <TooltipProvider>
-          <div
-            id={"modalContainer"}
-            style={{ position: "fixed", left: 0, top: 0, zIndex: 100000 }}
-          />
+          <div id="modalContainer" style={modalStyle} />
+
           <Editor
             config={props.config}
             locale={editorSearchParams.locale ?? undefined}
@@ -87,19 +113,14 @@ export function EasyblocksParent(props: EasyblocksParentProps) {
             rootTemplateId={editorSearchParams.rootTemplateId}
             externalData={props.externalData}
             onExternalDataChange={props.onExternalDataChange}
-            widgets={{
-              ...builtinWidgets,
-              ...props.widgets,
-            }}
+            widgets={widgets}
             components={props.components}
-            pickers={{
-              ...builinPickers,
-              ...props.pickers,
-            }}
+            pickers={pickers}
           />
         </TooltipProvider>
-        <Toaster containerStyle={{ zIndex: 100100 }} />
+
+        <Toaster containerStyle={toasterStyle} />
       </ModalContext.Provider>
     </StyleSheetManager>
   );
-}
+});
diff --git a/packages/editor/src/Editor.tsx b/packages/editor/src/Editor.tsx
index 8d688364..b68a7213 100644
--- a/packages/editor/src/Editor.tsx
+++ b/packages/editor/src/Editor.tsx
@@ -43,10 +43,12 @@ import React, {
   useCallback,
   useEffect,
   useRef,
+  useMemo,
   useState,
 } from "react";
 import Modal from "react-modal";
 import styled from "styled-components";
+
 import { ConfigAfterAutoContext } from "./ConfigAfterAutoContext";
 import { ExternalDataChangeHandler } from "./EasyblocksEditorProps";
 import { EditorContext, EditorContextType } from "./EditorContext";
@@ -77,10 +79,9 @@ import {
 } from "./types";
 import { useDataSaver } from "./useDataSaver";
 import { useEditorGlobalKeyboardShortcuts } from "./useEditorGlobalKeyboardShortcuts";
-import { useEditorHistory } from "./useEditorHistory";
+import { useEditorHistory, EditorHistoryChange } from "./useEditorHistory";
 import { checkLocalesCorrectness } from "./utils/locales/checkLocalesCorrectness";
 import { removeLocalizedFlag } from "./utils/locales/removeLocalizedFlag";
-import { ZodNullDef } from "zod";
 import { TemplatePicker } from "./TemplatePicker";
 
 const ContentContainer = styled.div`
@@ -155,7 +156,9 @@ const AuthenticationScreen = styled.div`
   ${Fonts.bodyLarge}
 `;
 
-type EditorProps = {
+const noop = () => {};
+
+interface EditorProps {
   config: Config;
   locale?: string;
   readOnly: boolean;
@@ -174,9 +177,9 @@ type EditorProps = {
   >;
   components?: Record<string, ComponentType<any>>;
   pickers?: Record<string, TemplatePicker>;
-};
+}
 
-export const Editor = EditorBackendInitializer;
+export const Editor = memo(EditorBackendInitializer);
 
 function EditorBackendInitializer(props: EditorProps) {
   const [enabled, setEnabled] = useState<boolean>(false);
@@ -211,7 +214,7 @@ function EditorBackendInitializer(props: EditorProps) {
     }
 
     run();
-  }, []);
+  }, [props.documentId, props.config.backend.documents]);
 
   if (!enabled) {
     return <AuthenticationScreen>Loading...</AuthenticationScreen>;
@@ -220,7 +223,7 @@ function EditorBackendInitializer(props: EditorProps) {
   if (error) {
     return (
       <DataSaverRoot>
-        <DataSaverOverlay></DataSaverOverlay>
+        <DataSaverOverlay />
         <DataSaverModal>{error}</DataSaverModal>
       </DataSaverRoot>
     );
@@ -272,35 +275,47 @@ const EditorWrapper = memo(
       throw new Error("Required property Config.locales is empty");
     }
 
-    checkLocalesCorrectness(props.config.locales); // very important to check locales correctness, circular references etc. Other functions
-    const locale = props.locale ?? getDefaultLocale(props.config.locales).code;
+    const locale = useMemo(() => {
+      // very important to check locales correctness, circular references etc. Other functions
+      checkLocalesCorrectness(props.config.locales);
+      return props.locale ?? getDefaultLocale(props.config.locales).code;
+    }, [props.locale, props.config.locales]);
 
-    const rootTemplateEntry = props.rootTemplateId
-      ? props.config.templates?.find((t) => t.id === props.rootTemplateId)
-          ?.entry
-      : null;
+    const rootTemplateEntry = useMemo(() => {
+      return props.rootTemplateId
+        ? props.config.templates?.find((t) => t.id === props.rootTemplateId)
+            ?.entry
+        : null;
+    }, [props.rootTemplateId, props.config.templates]);
 
     const rootComponentId = props.document
       ? props.document.entry._component
       : rootTemplateEntry?._component ?? props.rootComponentId;
 
-    const compilationContext = createCompilationContext(
-      props.config,
-      {
-        locale,
-      },
-      rootComponentId!
-    );
-
-    const initialEntry = props.document
-      ? adaptRemoteConfig(props.document.entry, compilationContext)
-      : normalize(
-          rootTemplateEntry ?? {
-            _id: uniqueId(),
-            _component: rootComponentId!,
-          },
-          compilationContext
-        );
+    const compilationContext = useMemo(() => {
+      return createCompilationContext(
+        props.config,
+        { locale },
+        rootComponentId as string
+      );
+    }, [locale, props.config, rootComponentId]);
+
+    const initialEntry = useMemo(() => {
+      return props.document
+        ? adaptRemoteConfig(props.document.entry, compilationContext)
+        : normalize(
+            rootTemplateEntry ?? {
+              _id: uniqueId(),
+              _component: rootComponentId as string,
+            },
+            compilationContext
+          );
+    }, [
+      compilationContext,
+      props.document,
+      rootComponentId,
+      rootTemplateEntry,
+    ]);
 
     return (
       <EditorContent
@@ -313,12 +328,12 @@ const EditorWrapper = memo(
   }
 );
 
-type EditorContentProps = EditorProps & {
+interface EditorContentProps extends EditorProps {
   compilationContext: CompilationContextType;
   initialDocument: Document | null;
   initialEntry: NoCodeComponentEntry;
   heightMode?: "viewport" | "full";
-};
+}
 
 function parseExternalDataId(externalDataId: string): {
   configId: string;
@@ -343,19 +358,7 @@ function useBuiltContent(
 ): NonEmptyRenderableContent & {
   meta: CompilationMetadata;
 } {
-  const buildEntryResult = useRef<ReturnType<typeof buildEntry>>();
-
-  // cached inputs (needed to calculated "inputChanged")
-  const inputRawContent = useRef<NoCodeComponentEntry>();
-  const inputIsEditing = useRef<boolean>();
-  const inputBreakpointIndex = useRef<string>();
-
-  const inputChanged =
-    inputRawContent.current !== rawContent ||
-    inputIsEditing.current !== editorContext.isEditing ||
-    inputBreakpointIndex.current !== editorContext.breakpointIndex;
-
-  if (!buildEntryResult.current || inputChanged) {
+  const buildEntryResult = useMemo<ReturnType<typeof buildEntry>>(() => {
     /*
      * Why do we merge meta instead of overriding?
      * It might seem redundant. We could only take the newest meta and re-render, right?
@@ -376,8 +379,7 @@ function useBuiltContent(
      * that were added at any point will be available later.
      *
      */
-
-    buildEntryResult.current = buildEntry({
+    return buildEntry({
       entry: rawContent,
       config,
       locale: editorContext.contextParams.locale,
@@ -427,19 +429,15 @@ function useBuiltContent(
 
         // If external data for given is is already stored, but now the external id is different it means that the user
         // has changed the selected external value and thus the user of editor has to update it in its external data.
-        if (
-          storedExternalData &&
-          externalDataValue.externalId &&
-          inputRawContent.current
-        ) {
+        if (storedExternalData && externalDataValue.externalId && rawContent) {
           const { breakpointIndex, configId, fieldName } = parseExternalDataId(
             externalDataValue.id
           );
 
           const config = findConfigById(
-            inputRawContent.current,
+            rawContent,
             editorContext,
-            configId === "$" ? inputRawContent.current._id : configId
+            configId === "$" ? rawContent._id : configId
           );
 
           if (!config) {
@@ -459,26 +457,22 @@ function useBuiltContent(
         return defaultIsExternalDataChanged(externalDataValue);
       },
     });
+  }, [config, editorContext, externalData, rawContent]);
 
-    if (Object.keys(buildEntryResult.current.externalData).length > 0) {
+  useEffect(() => {
+    if (Object.keys(buildEntryResult.externalData).length > 0) {
       onExternalDataChange(
-        buildEntryResult.current.externalData,
+        buildEntryResult.externalData,
         editorContext.contextParams
       );
     }
-  }
-
-  inputRawContent.current = rawContent;
-  inputIsEditing.current = editorContext.isEditing;
-  inputBreakpointIndex.current = editorContext.breakpointIndex;
+  }, [
+    buildEntryResult.externalData,
+    editorContext.contextParams,
+    onExternalDataChange,
+  ]);
 
-  return {
-    renderableContent: (buildEntryResult.current as NonEmptyRenderableContent)
-      .renderableContent,
-    configAfterAuto: (buildEntryResult.current as NonEmptyRenderableContent)
-      .configAfterAuto,
-    meta: buildEntryResult.current.meta,
-  };
+  return buildEntryResult;
 }
 
 function calculateViewportRelatedStuff(
@@ -494,7 +488,7 @@ function calculateViewportRelatedStuff(
     if (!availableSize) {
       activeDevice = devices.find(
         (device) => device.id === mainBreakpointIndex
-      )!;
+      );
     } else {
       const matchingDevice = getMatchingDevice(devices, availableSize.width);
       if (!matchingDevice) {
@@ -504,7 +498,7 @@ function calculateViewportRelatedStuff(
       activeDevice = matchingDevice;
     }
   } else {
-    activeDevice = devices.find((device) => device.id === viewport)!;
+    activeDevice = devices.find((device) => device.id === viewport);
   }
 
   const activeDeviceindex = devices.findIndex(
@@ -526,9 +520,7 @@ function calculateViewportRelatedStuff(
       height = availableSize.height;
     } else {
       const smallestNonScaledWidth =
-        activeDeviceindex === 0
-          ? 0
-          : devices[activeDeviceindex - 1].breakpoint!;
+        activeDeviceindex === 0 ? 0 : devices[activeDeviceindex - 1].breakpoint;
 
       width = activeDevice.w;
       height =
@@ -569,539 +561,642 @@ function calculateViewportRelatedStuff(
 function useRerenderOnIframeResize(iframe?: HTMLIFrameElement | null) {
   const { forceRerender } = useForceRerender();
 
-  const resizeObserver = useRef(
-    new ResizeObserver(
-      throttle(() => {
-        forceRerender();
-      }, 100)
-    )
+  const resizeObserver = useMemo(
+    () =>
+      new ResizeObserver(
+        throttle(() => {
+          forceRerender();
+        }, 100)
+      ),
+    [forceRerender]
   );
 
   useEffect(() => {
     if (!iframe) {
-      return;
+      return () => {};
     }
 
-    resizeObserver.current.observe(iframe);
+    resizeObserver.observe(iframe);
 
     return () => {
-      resizeObserver.current.unobserve(iframe);
+      resizeObserver.unobserve(iframe);
     };
-  }, [iframe]);
+  }, [iframe, resizeObserver]);
 }
 
-const EditorContent = ({
-  compilationContext,
-  heightMode = "viewport",
-  initialDocument,
-  initialEntry,
-  externalData,
-  ...props
-}: EditorContentProps) => {
-  const [currentViewport, setCurrentViewport] = useState<string>(
-    compilationContext.mainBreakpointIndex
-  ); // "{ breakpoint }" or "fit-screen"
-
-  const iframeContainerRef = useRef<HTMLIFrameElement>(null);
-  const availableSize = iframeContainerRef.current
-    ? {
-        width: iframeContainerRef.current.clientWidth,
-        height: iframeContainerRef.current.clientHeight,
-      }
-    : undefined;
-
-  const { breakpointIndex, iframeSize } = calculateViewportRelatedStuff(
-    currentViewport,
-    compilationContext.devices,
-    compilationContext.mainBreakpointIndex,
-    availableSize
-  );
+const EditorContent = memo(
+  ({
+    compilationContext,
+    heightMode = "viewport",
+    initialDocument,
+    initialEntry,
+    externalData,
+    ...props
+  }: EditorContentProps) => {
+    const [currentViewport, setCurrentViewport] = useState<string>(
+      compilationContext.mainBreakpointIndex
+    ); // "{ breakpoint }" or "fit-screen"
+
+    const iframeContainerRef = useRef<HTMLIFrameElement>(null);
+
+    const availableWidth = iframeContainerRef.current?.clientWidth;
+    const availableHeight = iframeContainerRef.current?.clientHeight;
+
+    const { breakpointIndex, iframeSize } = useMemo(() => {
+      const availableSize =
+        typeof availableWidth === "number" &&
+        typeof availableHeight === "number"
+          ? { width: availableWidth, height: availableHeight }
+          : undefined;
+
+      return calculateViewportRelatedStuff(
+        currentViewport,
+        compilationContext.devices,
+        compilationContext.mainBreakpointIndex,
+        availableSize
+      );
+    }, [
+      currentViewport,
+      availableWidth,
+      availableHeight,
+      compilationContext.mainBreakpointIndex,
+      compilationContext.devices,
+    ]);
+
+    // re-render on resize (recalculates viewport size, active breakpoint for fit-screen etc);
+    useRerenderOnIframeResize(iframeContainerRef.current);
+
+    const compilationCache = useMemo(() => new CompilationCache(), []);
+    const [isEditing, setEditing] = useState(true);
+
+    const [componentPickerData, setComponentPickerData] = useState<
+      | {
+          promiseResolve: (config: NoCodeComponentEntry | undefined) => void;
+          config: OpenComponentPickerConfig;
+        }
+      | undefined
+    >(undefined);
 
-  useRerenderOnIframeResize(iframeContainerRef.current); // re-render on resize (recalculates viewport size, active breakpoint for fit-screen etc);
+    const [focussedField, setFocussedField] = useState<string[]>([]);
 
-  const compilationCache = useRef(new CompilationCache());
-  const [isEditing, setEditing] = useState(true);
-  const [componentPickerData, setComponentPickerData] = useState<
-    | {
-        promiseResolve: (config: NoCodeComponentEntry | undefined) => void;
-        config: OpenComponentPickerConfig;
-      }
-    | undefined
-  >(undefined);
-  const [focussedField, setFocussedField] = useState<Array<string>>([]);
-
-  const handleSetFocussedField = React.useRef(
-    (field: Array<string> | string) => {
+    const handleSetFocussedField = useCallback((field: string[] | string) => {
       const nextFocusedField = Array.isArray(field) ? field : [field];
       setFocussedField(nextFocusedField);
-    }
-  ).current;
+    }, []);
 
-  const handleSetEditing = useCallback(() => {
-    compilationCache.current.clear();
-    setEditing(!isEditing);
-  }, [isEditing]);
+    const onFocussedFieldClear = useCallback(() => {
+      setFocussedField([]);
+    }, []);
 
-  const closeComponentPickerModal = (config?: NoCodeComponentEntry) => {
-    setComponentPickerData(undefined);
-    componentPickerData!.promiseResolve(config);
-  };
+    const handleSetEditing = useCallback(() => {
+      compilationCache.clear();
+      setEditing((isEditing) => !isEditing);
+    }, [compilationCache]);
 
-  const sidebarNodeRef = useRef<HTMLDivElement | null>(null);
+    const closeComponentPickerModal = useCallback(
+      (config?: NoCodeComponentEntry) => {
+        setComponentPickerData(undefined);
+        componentPickerData?.promiseResolve(config);
+      },
+      [componentPickerData]
+    );
 
-  const [editableData, form] = useForm({
-    id: "easyblocks-editor",
-    label: "Edit entry",
-    fields: [],
-    initialValues: initialEntry,
-    onSubmit: async () => {},
-  });
+    const sidebarNodeRef = useRef<HTMLDivElement | null>(null);
 
-  const { undo, redo, push } = useEditorHistory({
-    onChange: ({ config, focusedField }) => {
-      setFocussedField(focusedField);
-      form.finalForm.change("", config);
-    },
-  });
+    const [editableData, form] = useForm({
+      id: "easyblocks-editor",
+      label: "Edit entry",
+      fields: [],
+      initialValues: initialEntry,
+      onSubmit: async () => {},
+    });
 
-  const [templates, setTemplates] = useState<Template[] | undefined>(undefined);
+    const onHistoryChange = useCallback(
+      ({ config, focusedField }: EditorHistoryChange) => {
+        setFocussedField(focusedField);
+        form.finalForm.change("", config);
+      },
+      [form]
+    );
 
-  const [openTemplateModalAction, setOpenTemplateModalAction] = useState<
-    OpenTemplateModalAction | undefined
-  >(undefined);
+    const { undo, redo, push } = useEditorHistory({
+      onChange: onHistoryChange,
+    });
 
-  const { notify } = useToaster();
+    const [templates, setTemplates] = useState<Template[] | undefined>(
+      undefined
+    );
 
-  const actions: ActionsType = {
-    openTemplateModal: setOpenTemplateModalAction,
-    notify: (message) => {
-      notify(message);
-    },
-    openComponentPicker: function (config) {
-      return new Promise((resolve) => {
-        setComponentPickerData({
-          promiseResolve: resolve,
-          config,
-        });
-      });
-    },
-    replaceItems: (paths, newConfig) => {
-      actions.runChange(() => {
-        replaceItems(paths, newConfig, editorContext);
-      });
-    },
-    moveItems: (fieldNames, direction) => {
-      actions.runChange(() => {
-        return moveItems(form, fieldNames, direction);
-      });
-    },
-    removeItems: (fieldNames) => {
-      actions.runChange(() => {
-        return removeItems(form, fieldNames, editorContext);
-      });
-    },
-    insertItem: ({ name, index, block }) => {
-      actions.runChange(() => {
-        form.mutators.insert(
-          name,
-          index,
-          duplicateConfig(block, compilationContext)
-        );
+    const [openTemplateModalAction, setOpenTemplateModalAction] = useState<
+      OpenTemplateModalAction | undefined
+    >(undefined);
 
-        return [`${name}.${index}`];
-      });
-    },
-    duplicateItems: (fieldNames) => {
-      actions.runChange(() => {
-        return duplicateItems(form, fieldNames, compilationContext);
-      });
-    },
-    pasteItems: (what) => {
-      actions.runChange(() =>
-        pasteItems({
-          what,
-          where: focussedField,
-          resolveDestination: destinationResolver({
-            form,
-            context: compilationContext,
-          }),
-          pasteCommand: pasteManager(),
-        })
-      );
-    },
-    runChange: (configChangeCallback) => {
-      let fieldsToFocus!: Array<string>;
-
-      // When multiple fields are selected, the update could probably invoke `form.change` multiple times.
-      // To avoid multiple rerenders, we batch them to trigger single update.
-      form.finalForm.batch(() => {
-        // This shallow copy of `focussedField` array is SUPER IMPORTANT!
-        // Here is why...
-        //
-        // We invoke `configChangeCallback`, but since we are in batch, changes made to form state won't notify
-        // any listeners that there were any changes. This means `window.editorWindowAPI.onUpdate` won't be invoked.
-        //
-        // Next, update of `focussedField` is going to be queued up. React's heuristics will treat this update
-        // as update with high priority and synchronously rerender. `EditorContent` is going to rerender with updated
-        // `focussedField` state, but also with updated `editableData` because it's a result of **getter**!
-        // `useEffect` that is responsible for invoking `window.editorWindowAPI.onUpdate` will receive new dependencies,
-        // save them as the the latest, but it won't be immediately invoked after component have returned.
-        // Then the batch ends and all form listeners are going to be notified. `EditorContent` will rerender again,
-        // but `editableData` and `focussedField` are the same! `useEffect` will be invoked again, it will compare its dependencies
-        // and finds that the haven't changed.
-        //
-        // Making a shallow copy of `focussedField` will make the second invocation of `useEffect` different from the first
-        // triggered by calling `setFocussedField`.
-        fieldsToFocus = configChangeCallback() ?? [...focussedField];
-
-        push({
-          config: form.values,
-          focussedField: fieldsToFocus,
-        });
-
-        setFocussedField(fieldsToFocus);
-      });
-    },
-    logSelectedItems: () => {
-      logItems(editorContext.form, focussedField);
-    },
-  };
+    const onTemplateModalClose = useCallback(() => {
+      setOpenTemplateModalAction(undefined);
+    }, []);
 
-  const [isAdminMode, setAdminMode] = useState(false);
+    const editorContextRef = useRef<EditorContextType | undefined>(undefined);
 
-  const syncTemplates = () => {
-    getTemplates(editorContext, (props.config.templates as any) ?? []).then(
-      (newTemplates) => {
-        setTemplates(newTemplates);
-      }
-    );
-  };
+    const { notify } = useToaster();
 
-  useEffect(() => {
-    syncTemplates();
-  }, [props.config.components, props.config.templates]);
-
-  const editorTypes: EditorContextType["types"] = Object.fromEntries(
-    Object.entries(compilationContext.types).map(
-      ([typeName, typeDefinition]) => {
-        return [
-          typeName,
-          {
-            ...typeDefinition,
-            ...(typeDefinition.type === "external"
-              ? {
-                  widgets: typeDefinition.widgets.map((w) => {
-                    return {
-                      ...w,
-                      component: props.widgets?.[w.id] as any,
-                    };
-                  }),
-                }
-              : typeDefinition.widget
-              ? {
-                  widget: {
-                    ...typeDefinition.widget,
-                    component: props.widgets?.[typeDefinition.widget.id] as any,
-                  },
-                }
-              : {}),
-          },
-        ];
-      }
-    )
-  );
+    const actions: ActionsType = useMemo<ActionsType>(
+      () => ({
+        openTemplateModal: setOpenTemplateModalAction,
+        notify: (message) => {
+          notify(message);
+        },
+        openComponentPicker: function (config) {
+          return new Promise((resolve) => {
+            setComponentPickerData({
+              promiseResolve: resolve,
+              config,
+            });
+          });
+        },
+        replaceItems: (paths, newConfig) => {
+          actions.runChange(() => {
+            if (editorContextRef.current) {
+              replaceItems(paths, newConfig, editorContextRef.current);
+            }
+          });
+        },
+        moveItems: (fieldNames, direction) => {
+          actions.runChange(() => {
+            return moveItems(form, fieldNames, direction);
+          });
+        },
+        removeItems: (fieldNames) => {
+          actions.runChange(() => {
+            if (editorContextRef.current) {
+              removeItems(form, fieldNames, editorContextRef.current);
+            }
+          });
+        },
+        insertItem: ({ name, index, block }) => {
+          actions.runChange(() => {
+            form.mutators.insert(
+              name,
+              index,
+              duplicateConfig(block, compilationContext)
+            );
 
-  const editorContext: EditorContextType = {
-    ...compilationContext,
-    backend: props.config.backend,
-    types: editorTypes,
-    isAdminMode,
-    templates,
-    syncTemplates,
-    breakpointIndex,
-    focussedField,
-    form,
-    setFocussedField: handleSetFocussedField,
-    isEditing,
-    actions,
-    save: async (documentData) => {
-      window.postMessage({
-        type: "@easyblocks/content-saved",
-        document: documentData,
-      });
-    },
-    compilationCache: compilationCache.current,
-    readOnly: props.readOnly,
-    disableCustomTemplates: props.config.disableCustomTemplates ?? false,
-    rootComponent: findComponentDefinitionById(
-      initialEntry._component,
-      compilationContext
-    )!,
-    components: props.components ?? {},
-  };
+            return [`${name}.${index}`];
+          });
+        },
+        duplicateItems: (fieldNames) => {
+          actions.runChange(() => {
+            return duplicateItems(form, fieldNames, compilationContext);
+          });
+        },
+        pasteItems: (what) => {
+          actions.runChange(() => {
+            setFocussedField((focussedField) => {
+              pasteItems({
+                what,
+                where: focussedField,
+                resolveDestination: destinationResolver({
+                  form,
+                  context: compilationContext,
+                }),
+                pasteCommand: pasteManager(),
+              });
+
+              return focussedField;
+            });
+          });
+        },
+        runChange: (configChangeCallback) => {
+          // When multiple fields are selected, the update could probably invoke `form.change` multiple times.
+          // To avoid multiple rerenders, we batch them to trigger single update.
+          form.finalForm.batch(() => {
+            // This shallow copy of `focussedField` array is SUPER IMPORTANT!
+            // Here is why...
+            //
+            // We invoke `configChangeCallback`, but since we are in batch, changes made to form state won't notify
+            // any listeners that there were any changes. This means `window.editorWindowAPI.onUpdate` won't be invoked.
+            //
+            // Next, update of `focussedField` is going to be queued up. React's heuristics will treat this update
+            // as update with high priority and synchronously rerender. `EditorContent` is going to rerender with updated
+            // `focussedField` state, but also with updated `editableData` because it's a result of **getter**!
+            // `useEffect` that is responsible for invoking `window.editorWindowAPI.onUpdate` will receive new dependencies,
+            // save them as the the latest, but it won't be immediately invoked after component have returned.
+            // Then the batch ends and all form listeners are going to be notified. `EditorContent` will rerender again,
+            // but `editableData` and `focussedField` are the same! `useEffect` will be invoked again, it will compare its dependencies
+            // and finds that the haven't changed.
+            //
+            // Making a shallow copy of `focussedField` will make the second invocation of `useEffect` different from the first
+            // triggered by calling `setFocussedField`.
+            setFocussedField((focussedField) => {
+              const fieldsToFocus = configChangeCallback() ?? [
+                ...focussedField,
+              ];
+
+              push({
+                config: form.values,
+                focussedField: fieldsToFocus,
+              });
+
+              return fieldsToFocus;
+            });
+          });
+        },
+        logSelectedItems: () => {
+          setFocussedField((focussedField) => {
+            if (editorContextRef.current) {
+              logItems(editorContextRef.current.form, focussedField);
+            }
 
-  const { configAfterAuto, renderableContent, meta } = useBuiltContent(
-    editorContext,
-    props.config,
-    editableData,
-    externalData,
-    props.onExternalDataChange
-  );
+            return focussedField;
+          });
+        },
+      }),
+      [compilationContext, form, notify, push]
+    );
 
-  editorContext.compiledComponentConfig = renderableContent;
-  editorContext.configAfterAuto = configAfterAuto;
+    const [isAdminMode, setAdminMode] = useState(false);
 
-  console.debug("editable data", editableData);
-  console.debug("focused field", focussedField);
-  console.debug("meta", meta);
-  console.debug("compiled config", {
-    configAfterAuto,
-    renderableContent,
-  });
-  console.debug("external data", externalData);
+    const onAdminModeChange = useCallback((adminMode: boolean) => {
+      setAdminMode(adminMode);
+    }, []);
 
-  window.editorWindowAPI = window.editorWindowAPI || {};
-  window.editorWindowAPI.editorContext = editorContext;
-  window.editorWindowAPI.meta = meta;
-  window.editorWindowAPI.compiled = renderableContent;
-  window.editorWindowAPI.externalData = externalData;
+    const syncTemplates = useCallback(() => {
+      getTemplates(
+        editorContextRef.current as EditorContextType,
+        (props.config.templates as any[]) ?? []
+      ).then((newTemplates) => {
+        setTemplates(newTemplates);
+      });
+    }, [props.config.templates]);
 
-  useEffect(() => {
-    push({
-      config: initialEntry,
-      focussedField: [],
-    });
-  }, []);
+    useEffect(() => {
+      syncTemplates();
+    }, [syncTemplates]);
 
-  useEffect(() => {
-    if (window.editorWindowAPI.onUpdate) {
-      window.editorWindowAPI.onUpdate();
-    }
-  }, [
-    renderableContent,
-    focussedField,
-    isEditing,
-    currentViewport,
-    externalData,
-  ]);
+    const editorContext = useMemo<EditorContextType>(() => {
+      const editorTypes: EditorContextType["types"] = Object.fromEntries(
+        Object.entries(compilationContext.types).map(
+          ([typeName, typeDefinition]) => {
+            return [
+              typeName,
+              {
+                ...typeDefinition,
+                ...(typeDefinition.type === "external"
+                  ? {
+                      widgets: typeDefinition.widgets.map((w) => {
+                        return {
+                          ...w,
+                          component: props.widgets?.[w.id] as any,
+                        };
+                      }),
+                    }
+                  : typeDefinition.widget
+                  ? {
+                      widget: {
+                        ...typeDefinition.widget,
+                        component: props.widgets?.[
+                          typeDefinition.widget.id
+                        ] as any,
+                      },
+                    }
+                  : undefined),
+              },
+            ];
+          }
+        )
+      );
 
-  useEffect(() => {
-    function handleEditorEvents(
-      event: ComponentPickerOpenedEvent | ItemInsertedEvent | ItemMovedEvent
-    ) {
-      if (event.data.type === "@easyblocks-editor/component-picker-opened") {
-        actions
-          .openComponentPicker({ path: event.data.payload.path })
-          .then((config) => {
-            const shopstoryCanvasIframe = window.document.getElementById(
-              "shopstory-canvas"
-            ) as HTMLIFrameElement | undefined;
-
-            shopstoryCanvasIframe?.contentWindow?.postMessage(
-              componentPickerClosed(config)
-            );
+      const editorContext: EditorContextType = {
+        ...compilationContext,
+        backend: props.config.backend,
+        types: editorTypes,
+        isAdminMode,
+        templates,
+        syncTemplates,
+        breakpointIndex,
+        focussedField,
+        form,
+        setFocussedField: handleSetFocussedField,
+        isEditing,
+        actions,
+        save: async (documentData) => {
+          window.postMessage({
+            type: "@easyblocks/content-saved",
+            document: documentData,
           });
-      }
+        },
+        compilationCache: compilationCache,
+        readOnly: props.readOnly,
+        disableCustomTemplates: props.config.disableCustomTemplates ?? false,
+        rootComponent: findComponentDefinitionById(
+          initialEntry._component,
+          compilationContext
+        ) as InternalComponentDefinition,
+        components: props.components ?? {},
+      };
+
+      editorContextRef.current = editorContext;
+
+      return editorContext;
+    }, [
+      actions,
+      breakpointIndex,
+      compilationCache,
+      compilationContext,
+      focussedField,
+      form,
+      handleSetFocussedField,
+      initialEntry._component,
+      isAdminMode,
+      isEditing,
+      props.components,
+      props.config.backend,
+      props.config.disableCustomTemplates,
+      props.readOnly,
+      props.widgets,
+      syncTemplates,
+      templates,
+    ]);
+
+    const { configAfterAuto, renderableContent, meta } = useBuiltContent(
+      editorContext,
+      props.config,
+      editableData,
+      externalData,
+      props.onExternalDataChange
+    );
 
-      if (event.data.type === "@easyblocks-editor/item-inserted") {
-        actions.insertItem(event.data.payload);
+    editorContext.compiledComponentConfig = renderableContent;
+    editorContext.configAfterAuto = configAfterAuto;
+
+    console.debug("editable data", editableData);
+    console.debug("focused field", focussedField);
+    console.debug("meta", meta);
+    console.debug("compiled config", {
+      configAfterAuto,
+      renderableContent,
+    });
+    console.debug("external data", externalData);
+
+    window.editorWindowAPI = window.editorWindowAPI || {};
+    window.editorWindowAPI.editorContext = editorContext;
+    window.editorWindowAPI.meta = meta;
+    window.editorWindowAPI.compiled = renderableContent;
+    window.editorWindowAPI.externalData = externalData;
+
+    useEffect(() => {
+      push({
+        config: initialEntry,
+        focussedField: [],
+      });
+    }, []);
+
+    useEffect(() => {
+      if (window.editorWindowAPI.onUpdate) {
+        window.editorWindowAPI.onUpdate();
       }
+    }, [
+      renderableContent,
+      focussedField,
+      isEditing,
+      currentViewport,
+      externalData,
+    ]);
+
+    useEffect(() => {
+      function handleEditorEvents(
+        event: ComponentPickerOpenedEvent | ItemInsertedEvent | ItemMovedEvent
+      ) {
+        switch (event.data.type) {
+          case "@easyblocks-editor/component-picker-opened": {
+            actions
+              .openComponentPicker({ path: event.data.payload.path })
+              .then((config) => {
+                const shopstoryCanvasIframe = window.document.getElementById(
+                  "shopstory-canvas"
+                ) as HTMLIFrameElement | null;
+
+                shopstoryCanvasIframe?.contentWindow?.postMessage(
+                  componentPickerClosed(config),
+                  "*"
+                );
+              });
+
+            break;
+          }
 
-      if (event.data.type === "@easyblocks-editor/item-moved") {
-        const { fromPath, toPath, placement } = event.data.payload;
+          case "@easyblocks-editor/item-inserted": {
+            actions.insertItem(event.data.payload);
+            break;
+          }
 
-        const fromPathParseResult = parsePath(fromPath, editorContext.form);
-        const toPathParseResult = parsePath(toPath, editorContext.form);
+          case "@easyblocks-editor/item-moved": {
+            const { fromPath, toPath, placement } = event.data.payload;
+            const editorContext = editorContextRef.current as EditorContextType;
+
+            const fromPathParseResult = parsePath(fromPath, editorContext.form);
+            const toPathParseResult = parsePath(toPath, editorContext.form);
+
+            if (
+              !fromPathParseResult.parent ||
+              !toPathParseResult.parent ||
+              fromPathParseResult.index === undefined ||
+              toPathParseResult === undefined
+            ) {
+              return;
+            }
+
+            if (
+              fromPathParseResult.parent.path === toPathParseResult.parent.path
+            ) {
+              const pathToMove = `${
+                fromPathParseResult.parent.path
+                  ? fromPathParseResult.parent.path + "."
+                  : ""
+              }${fromPathParseResult.parent.fieldName}`;
+
+              actions.runChange(() => {
+                form.mutators.move(
+                  pathToMove,
+                  fromPathParseResult.index,
+                  toPathParseResult.index
+                );
+
+                return [toPath];
+              });
+            } else {
+              // TODO: We should reuse logic of pasting items here, but we need to handle the case of pasting into placeholder (empty array)
+              const isToPathPlaceholder =
+                toPathParseResult.fieldName !== undefined;
+
+              const insertionPath = `${
+                toPathParseResult.parent.path === ""
+                  ? ""
+                  : toPathParseResult.parent.path + "."
+              }${toPathParseResult.parent.fieldName}${
+                isToPathPlaceholder
+                  ? `.${toPathParseResult.index}.${toPathParseResult.fieldName}`
+                  : ""
+              }`;
+
+              actions.runChange(() => {
+                const newConfig = duplicateConfig(
+                  dotNotationGet(form.values, fromPath),
+                  editorContext
+                );
+
+                const insertionIndex = calculateInsertionIndex(
+                  fromPath,
+                  toPath,
+                  placement,
+                  form
+                );
+
+                form.mutators.insert(insertionPath, insertionIndex, newConfig);
+
+                actions.removeItems([fromPath]);
+
+                return [
+                  isToPathPlaceholder
+                    ? `${insertionPath}.0`
+                    : `${insertionPath}.${insertionIndex}`,
+                ];
+              });
+            }
+
+            break;
+          }
 
-        if (
-          !fromPathParseResult.parent ||
-          !toPathParseResult.parent ||
-          fromPathParseResult.index === undefined ||
-          toPathParseResult === undefined
-        ) {
-          return;
+          default:
+            break;
         }
+      }
 
-        if (fromPathParseResult.parent.path === toPathParseResult.parent.path) {
-          const pathToMove = `${
-            fromPathParseResult.parent.path
-              ? fromPathParseResult.parent.path + "."
-              : ""
-          }${fromPathParseResult.parent.fieldName}`;
+      window.addEventListener("message", handleEditorEvents);
 
-          actions.runChange(() => {
-            form.mutators.move(
-              pathToMove,
-              fromPathParseResult.index,
-              toPathParseResult.index
-            );
+      return () => {
+        window.removeEventListener("message", handleEditorEvents);
+      };
+    }, [actions, form]);
 
-            return [toPath];
-          });
-        } else {
-          // TODO: We should reuse logic of pasting items here, but we need to handle the case of pasting into placeholder (empty array)
-          const isToPathPlaceholder = toPathParseResult.fieldName !== undefined;
-
-          const insertionPath = `${
-            toPathParseResult.parent.path === ""
-              ? ""
-              : toPathParseResult.parent.path + "."
-          }${toPathParseResult.parent.fieldName}${
-            isToPathPlaceholder
-              ? `.${toPathParseResult.index}.${toPathParseResult.fieldName}`
-              : ""
-          }`;
+    const [isDataSaverOverlayOpen, setDataSaverOverlayOpen] = useState(false);
 
-          actions.runChange(() => {
-            const newConfig = duplicateConfig(
-              dotNotationGet(form.values, fromPath),
-              editorContext
-            );
+    useEditorGlobalKeyboardShortcuts(editorContext);
 
-            const insertionIndex = calculateInsertionIndex(
-              fromPath,
-              toPath,
-              placement,
-              form
-            );
+    const { saveNow } = useDataSaver(initialDocument, editorContext);
 
-            form.mutators.insert(insertionPath, insertionIndex, newConfig);
+    const onTopBarClose = useCallback(() => {
+      setDataSaverOverlayOpen(true);
+      saveNow().finally(() => {
+        setDataSaverOverlayOpen(false);
 
-            actions.removeItems([fromPath]);
+        window.postMessage(
+          {
+            type: "@easyblocks/closed",
+          },
+          "*"
+        );
 
-            return [
-              isToPathPlaceholder
-                ? `${insertionPath}.0`
-                : `${insertionPath}.${insertionIndex}`,
-            ];
-          });
+        if (props.onClose) {
+          props.onClose();
         }
-      }
-    }
-
-    window.addEventListener("message", handleEditorEvents);
-
-    return () => window.removeEventListener("message", handleEditorEvents);
-  }, []);
-
-  const [isDataSaverOverlayOpen, setDataSaverOverlayOpen] = useState(false);
+      });
+    }, [props, saveNow]);
 
-  useEditorGlobalKeyboardShortcuts(editorContext);
+    const appHeight = heightMode === "viewport" ? "100vh" : "100%";
 
-  const { saveNow } = useDataSaver(initialDocument, editorContext);
+    useEffect(() => {
+      Modal.setAppElement("#shopstory-app");
+    }, []);
 
-  const appHeight = heightMode === "viewport" ? "100vh" : "100%";
+    return (
+      <div id="shopstory-app" style={{ height: appHeight, overflow: "hidden" }}>
+        {isDataSaverOverlayOpen && (
+          <DataSaverRoot>
+            <DataSaverOverlay />
+
+            <DataSaverModal>
+              Saving data, please do not close the window...
+            </DataSaverModal>
+          </DataSaverRoot>
+        )}
+
+        <EditorContext.Provider value={editorContext}>
+          <ConfigAfterAutoContext.Provider value={configAfterAuto}>
+            <EditorExternalDataProvider externalData={externalData}>
+              <div id="rootContainer" />
+
+              <EditorTopBar
+                onUndo={undo}
+                onRedo={redo}
+                onClose={onTopBarClose}
+                devices={compilationContext.devices}
+                viewport={currentViewport}
+                onViewportChange={setCurrentViewport}
+                onIsEditingChange={handleSetEditing}
+                isEditing={isEditing}
+                saveLabel="Save"
+                locale={compilationContext.contextParams.locale}
+                locales={editorContext.locales}
+                onLocaleChange={noop}
+                onAdminModeChange={onAdminModeChange}
+                hideCloseButton={props.config.hideCloseButton ?? false}
+                readOnly={editorContext.readOnly}
+              />
 
-  useEffect(() => {
-    Modal.setAppElement("#shopstory-app");
-  }, []);
-
-  return (
-    <div id={"shopstory-app"} style={{ height: appHeight, overflow: "hidden" }}>
-      {isDataSaverOverlayOpen && (
-        <DataSaverRoot>
-          <DataSaverOverlay></DataSaverOverlay>
-
-          <DataSaverModal>
-            Saving data, please do not close the window...
-          </DataSaverModal>
-        </DataSaverRoot>
-      )}
-      <EditorContext.Provider value={editorContext}>
-        <ConfigAfterAutoContext.Provider value={configAfterAuto}>
-          <EditorExternalDataProvider externalData={externalData}>
-            <div id="rootContainer" />
-            <EditorTopBar
-              onUndo={undo}
-              onRedo={redo}
-              onClose={() => {
-                setDataSaverOverlayOpen(true);
-                saveNow().finally(() => {
-                  setDataSaverOverlayOpen(false);
-
-                  window.postMessage(
-                    {
-                      type: "@easyblocks/closed",
-                    },
-                    "*"
-                  );
-
-                  if (props.onClose) {
-                    props.onClose();
-                  }
-                });
-              }}
-              devices={compilationContext.devices}
-              viewport={currentViewport}
-              onViewportChange={setCurrentViewport}
-              onIsEditingChange={handleSetEditing}
-              isEditing={isEditing}
-              saveLabel={"Save"}
-              locale={compilationContext.contextParams.locale}
-              locales={editorContext.locales}
-              onLocaleChange={() => {}}
-              onAdminModeChange={(val) => {
-                setAdminMode(val);
-              }}
-              hideCloseButton={props.config.hideCloseButton ?? false}
-              readOnly={editorContext.readOnly}
-            />
-            <SidebarAndContentContainer height={appHeight}>
-              <ContentContainer
-                onClick={() => {
-                  setFocussedField([]);
-                }}
-              >
-                <EditorIframe
-                  onEditorHistoryUndo={undo}
-                  onEditorHistoryRedo={redo}
-                  width={iframeSize.width}
-                  height={iframeSize.height}
-                  transform={iframeSize.transform}
-                  containerRef={iframeContainerRef}
-                />
-                {isEditing && (
-                  <SelectionFrame
+              <SidebarAndContentContainer height={appHeight}>
+                <ContentContainer onClick={onFocussedFieldClear}>
+                  <EditorIframe
+                    onEditorHistoryUndo={undo}
+                    onEditorHistoryRedo={redo}
                     width={iframeSize.width}
                     height={iframeSize.height}
                     transform={iframeSize.transform}
+                    containerRef={iframeContainerRef}
                   />
+
+                  {isEditing && (
+                    <SelectionFrame
+                      width={iframeSize.width}
+                      height={iframeSize.height}
+                      transform={iframeSize.transform}
+                    />
+                  )}
+                </ContentContainer>
+
+                {isEditing && (
+                  <SidebarContainer ref={sidebarNodeRef}>
+                    <EditorSidebar focussedField={focussedField} form={form} />
+                  </SidebarContainer>
                 )}
-              </ContentContainer>
-              {isEditing && (
-                <SidebarContainer ref={sidebarNodeRef}>
-                  <EditorSidebar focussedField={focussedField} form={form} />
-                </SidebarContainer>
-              )}
-              {componentPickerData && (
-                <ModalPicker
-                  onClose={closeComponentPickerModal}
-                  config={componentPickerData.config}
-                  pickers={props.pickers}
+
+                {componentPickerData && (
+                  <ModalPicker
+                    onClose={closeComponentPickerModal}
+                    config={componentPickerData.config}
+                    pickers={props.pickers}
+                  />
+                )}
+              </SidebarAndContentContainer>
+
+              {openTemplateModalAction && (
+                <TemplateModal
+                  action={openTemplateModalAction}
+                  onClose={onTemplateModalClose}
+                  backend={editorContext.backend}
                 />
               )}
-            </SidebarAndContentContainer>
-
-            {openTemplateModalAction && (
-              <TemplateModal
-                action={openTemplateModalAction}
-                onClose={() => {
-                  setOpenTemplateModalAction(undefined);
-                }}
-                backend={editorContext.backend}
-              />
-            )}
-          </EditorExternalDataProvider>
-        </ConfigAfterAutoContext.Provider>
-      </EditorContext.Provider>
-    </div>
-  );
-};
+            </EditorExternalDataProvider>
+          </ConfigAfterAutoContext.Provider>
+        </EditorContext.Provider>
+      </div>
+    );
+  }
+);
 
 function adaptRemoteConfig(
   config: NoCodeComponentEntry,
   compilationContext: CompilationContextType
-) {
+): NoCodeComponentEntry {
   const withoutLocalizedFlag = removeLocalizedFlag(config, compilationContext);
   const normalized = normalize(withoutLocalizedFlag, compilationContext);
   return normalized;
@@ -1112,54 +1207,55 @@ function calculateInsertionIndex(
   toPath: string,
   placement: "before" | "after" | undefined,
   form: Form
-) {
+): number {
   const mostCommonPath = getMostCommonSubPath(fromPath, toPath);
-  const mostCommonPathParseResult = parsePath(mostCommonPath ?? "", form);
+  const mostCommonPathParseResult = parsePath(mostCommonPath, form);
   const toPathParseResult = parsePath(toPath, form);
   const toPathNoCodeEntry = dotNotationGet(form.values, toPath);
 
-  if (toPathNoCodeEntry.length === 0) {
+  if (toPathNoCodeEntry.length === 0 || toPathParseResult.index === undefined) {
     return 0;
   }
 
   // If there is no index in common path, it means that we're moving items between two sections
   if (mostCommonPathParseResult.index === undefined) {
-    const fromPathRootSectionIndex = +fromPath.split(".")[1];
-    const toPathRootSectionIndex = +toPath.split(".")[1];
+    const fromPathRootSectionIndex = Number(fromPath.split(".")[1]);
+    const toPathRootSectionIndex = Number(toPath.split(".")[1]);
 
     if (fromPathRootSectionIndex > toPathRootSectionIndex) {
       if (placement) {
         if (placement === "before") {
-          return toPathParseResult.index!;
+          return toPathParseResult.index;
         }
 
-        return toPathParseResult.index! + 1;
+        return toPathParseResult.index + 1;
       }
 
-      return toPathParseResult.index!;
+      return toPathParseResult.index;
     }
 
     if (placement) {
       if (placement === "before") {
-        return toPathParseResult.index!;
+        return toPathParseResult.index;
       }
 
-      return toPathParseResult.index! + 1;
+      return toPathParseResult.index + 1;
     }
 
-    return toPathParseResult.index! + 1;
+    return toPathParseResult.index + 1;
   }
 
-  return toPathParseResult.index! + 1;
+  return toPathParseResult.index + 1;
 }
 
-function getMostCommonSubPath(path1: string, path2: string) {
+function getMostCommonSubPath(path1: string, path2: string): string {
   const fromPathParts = path1.split(".");
   const toPathParts = path2.split(".");
+  const length = Math.min(fromPathParts.length, toPathParts.length);
 
-  let mostCommonPathParts: Array<string> | undefined = undefined;
+  const mostCommonPathParts: string[] = [];
 
-  for (let i = 0; i < Math.min(fromPathParts.length, toPathParts.length); i++) {
+  for (let i = 0; i < length; ++i) {
     const currentFromPathPart = fromPathParts[i];
     const currentToPathPart = toPathParts[i];
 
@@ -1167,15 +1263,10 @@ function getMostCommonSubPath(path1: string, path2: string) {
       break;
     }
 
-    if (!mostCommonPathParts) {
-      mostCommonPathParts = [currentFromPathPart];
-      continue;
-    }
-
     mostCommonPathParts.push(currentFromPathPart);
   }
 
-  return mostCommonPathParts?.join(".");
+  return mostCommonPathParts.join(".");
 }
 
 function findConfigById(
@@ -1198,7 +1289,10 @@ function findConfigById(
   return foundConfig;
 }
 
-function getMatchingDevice(devices: Array<DeviceRange>, width: number) {
+function getMatchingDevice(
+  devices: Array<DeviceRange>,
+  width: number
+): DeviceRange | null {
   const highestDevice = devices.find((d) => d.breakpoint === null);
 
   const visibleDevices = devices.filter(
@@ -1208,7 +1302,7 @@ function getMatchingDevice(devices: Array<DeviceRange>, width: number) {
   for (let i = 0; i < visibleDevices.length; i++) {
     const currentDevice = visibleDevices[i];
 
-    if (currentDevice.breakpoint! > width) {
+    if ((currentDevice.breakpoint ?? 0) > width) {
       return currentDevice;
     }
   }
diff --git a/packages/editor/src/EditorContext.ts b/packages/editor/src/EditorContext.ts
index b97e2216..55002ea5 100644
--- a/packages/editor/src/EditorContext.ts
+++ b/packages/editor/src/EditorContext.ts
@@ -43,7 +43,10 @@ type EditorTokenTypeDefinition = Omit<TokenTypeDefinition, "widgets"> & {
   };
 };
 
-export type EditorContextType = Omit<BaseEditorContextType, "types"> & {
+export type EditorContextType = Omit<
+  BaseEditorContextType,
+  "types" | "form"
+> & {
   backend: Backend;
   templates?: Template[];
   syncTemplates: () => void;
diff --git a/packages/editor/src/EditorExternalDataProvider.tsx b/packages/editor/src/EditorExternalDataProvider.tsx
index 963aaef1..eeac3f4b 100644
--- a/packages/editor/src/EditorExternalDataProvider.tsx
+++ b/packages/editor/src/EditorExternalDataProvider.tsx
@@ -1,24 +1,24 @@
-import { ExternalData } from "@easyblocks/core";
-import React, { createContext, ReactNode, useContext } from "react";
+import React, { createContext, ReactNode, useContext, memo } from "react";
+
+import type { ExternalData } from "@easyblocks/core";
 
 const ExternalDataContext = createContext<ExternalData>({});
 
-function EditorExternalDataProvider({
-  children,
-  externalData,
-}: {
+interface EditorExternalDataProviderProps {
   children: ReactNode;
   externalData: ExternalData;
-}) {
-  return (
-    <ExternalDataContext.Provider value={externalData}>
-      {children}
-    </ExternalDataContext.Provider>
-  );
 }
 
-function useEditorExternalData() {
+export const EditorExternalDataProvider = memo(
+  ({ children, externalData }: EditorExternalDataProviderProps) => {
+    return (
+      <ExternalDataContext.Provider value={externalData}>
+        {children}
+      </ExternalDataContext.Provider>
+    );
+  }
+);
+
+export function useEditorExternalData() {
   return useContext(ExternalDataContext);
 }
-
-export { EditorExternalDataProvider, useEditorExternalData };
diff --git a/packages/editor/src/EditorIframe.tsx b/packages/editor/src/EditorIframe.tsx
index a90300ba..3f8b2d70 100644
--- a/packages/editor/src/EditorIframe.tsx
+++ b/packages/editor/src/EditorIframe.tsx
@@ -1,6 +1,6 @@
-import { Colors } from "@easyblocks/design-system";
-import React, { useState } from "react";
+import React, { useMemo, useState, useCallback, memo } from "react";
 import styled from "styled-components";
+import { Colors } from "@easyblocks/design-system";
 import { ExtraKeys, useWindowKeyDown } from "./useWindowKeyDown";
 
 interface EditorIframeWrapperProps {
@@ -12,61 +12,65 @@ interface EditorIframeWrapperProps {
   containerRef: React.RefObject<HTMLDivElement>;
 }
 
-function EditorIframe({
-  onEditorHistoryRedo,
-  onEditorHistoryUndo,
-  width,
-  height,
-  transform,
-  containerRef,
-}: EditorIframeWrapperProps) {
-  const [isIframeReady, setIframeReady] = useState(false);
+export const EditorIframe = memo(
+  ({
+    onEditorHistoryRedo,
+    onEditorHistoryUndo,
+    width,
+    height,
+    transform,
+    containerRef,
+  }: EditorIframeWrapperProps) => {
+    const [isIframeReady, setIframeReady] = useState(false);
 
-  const handleIframeLoaded = () => {
-    setIframeReady(true);
-  };
+    const handleIframeLoaded = useCallback(() => {
+      setIframeReady(true);
+    }, []);
 
-  useWindowKeyDown("z", onEditorHistoryUndo, {
-    extraKeys: [ExtraKeys.META_KEY],
-    isDisabled: !isIframeReady,
-  });
+    useWindowKeyDown("z", onEditorHistoryUndo, {
+      extraKeys: [ExtraKeys.META_KEY],
+      isDisabled: !isIframeReady,
+    });
 
-  useWindowKeyDown("z", onEditorHistoryRedo, {
-    extraKeys: [ExtraKeys.META_KEY, ExtraKeys.SHIFT_KEY],
-    isDisabled: !isIframeReady,
-  });
+    useWindowKeyDown("z", onEditorHistoryRedo, {
+      extraKeys: [ExtraKeys.META_KEY, ExtraKeys.SHIFT_KEY],
+      isDisabled: !isIframeReady,
+    });
 
-  useWindowKeyDown("z", onEditorHistoryUndo, {
-    extraKeys: [ExtraKeys.CTRL_KEY],
-    isDisabled: !isIframeReady,
-  });
+    useWindowKeyDown("z", onEditorHistoryUndo, {
+      extraKeys: [ExtraKeys.CTRL_KEY],
+      isDisabled: !isIframeReady,
+    });
 
-  useWindowKeyDown("y", onEditorHistoryRedo, {
-    extraKeys: [ExtraKeys.CTRL_KEY],
-    isDisabled: !isIframeReady,
-  });
+    useWindowKeyDown("y", onEditorHistoryRedo, {
+      extraKeys: [ExtraKeys.CTRL_KEY],
+      isDisabled: !isIframeReady,
+    });
 
-  return (
-    <IframeContainer ref={containerRef}>
-      <IframeInnerContainer>
-        <Iframe
-          id="shopstory-canvas"
-          src={window.location.href}
-          onLoad={handleIframeLoaded}
-          style={{
-            // These properties will change a lot during resizing, so we don't pass it to styled component to prevent
-            // class name recalculations
-            width,
-            height,
-            transform,
-          }}
-        />
-      </IframeInnerContainer>
-    </IframeContainer>
-  );
-}
+    const style = useMemo(() => {
+      // These properties will change a lot during resizing, so we don't pass it to styled component to prevent
+      // class name recalculations
+      return {
+        width,
+        height,
+        transform,
+      };
+    }, [width, height, transform]);
 
-export { EditorIframe };
+    return (
+      <IframeContainer ref={containerRef}>
+        <IframeInnerContainer>
+          <Iframe
+            id="shopstory-canvas"
+            src={window.location.href}
+            onLoad={handleIframeLoaded}
+            style={style}
+          />
+        </IframeInnerContainer>
+      </IframeContainer>
+    );
+  }
+);
 
 const IframeContainer = styled.div`
   position: relative;
diff --git a/packages/editor/src/EditorSidebar.tsx b/packages/editor/src/EditorSidebar.tsx
index 0b7d4589..4475d146 100644
--- a/packages/editor/src/EditorSidebar.tsx
+++ b/packages/editor/src/EditorSidebar.tsx
@@ -1,18 +1,20 @@
-import { CompiledComponentConfig } from "@easyblocks/core";
+import React, { useMemo, memo } from "react";
 import { Fonts } from "@easyblocks/design-system";
 import { dotNotationGet } from "@easyblocks/utils";
-import React from "react";
 import styled from "styled-components";
+
+import type { CompiledComponentConfig } from "@easyblocks/core";
+
 import { buildTinaFields } from "./buildTinaFields";
 import { useEditorContext } from "./EditorContext";
 import { InlineSettings } from "./inline-settings";
 import { mergeCommonFields } from "./tinacms/form-builder/utils/mergeCommonFields";
 import { Form } from "./form";
 
-type EditorSidebarProps = {
-  focussedField: Array<string>;
+interface EditorSidebarProps {
+  focussedField: string[];
   form: Form;
-};
+}
 
 const Error = styled.div`
   ${Fonts.body}
@@ -25,11 +27,11 @@ const Error = styled.div`
   margin: 16px;
 `;
 
-export const EditorSidebar: React.FC<EditorSidebarProps> = (props) => {
+export const EditorSidebar = memo((props: EditorSidebarProps) => {
   const { focussedField, form } = props;
   const editorContext = useEditorContext();
 
-  const error = (() => {
+  const error = useMemo(() => {
     if (focussedField.length === 1) {
       const path = focussedField[0];
       const compiledComponent: CompiledComponentConfig = dotNotationGet(
@@ -42,20 +44,22 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = (props) => {
       }
     }
 
-    return null;
-  })();
+    return "";
+  }, [editorContext.compiledComponentConfig, focussedField, form.values]);
 
-  const areMultipleFieldsSelected = focussedField.length > 1;
-  const focusedFields = focussedField.length === 0 ? [""] : focussedField;
-  const fieldsPerFocusedField = focusedFields.map((focusedField) => {
-    return buildTinaFields(focusedField, editorContext);
-  });
+  const mergedFields = useMemo(() => {
+    const areMultipleFieldsSelected = focussedField.length > 1;
+    const focusedFields = focussedField.length === 0 ? [""] : focussedField;
+    const fieldsPerFocusedField = focusedFields.map((focusedField) => {
+      return buildTinaFields(focusedField, editorContext);
+    });
 
-  const mergedFields = areMultipleFieldsSelected
-    ? mergeCommonFields({
-        fields: fieldsPerFocusedField,
-      })
-    : fieldsPerFocusedField.flat();
+    return areMultipleFieldsSelected
+      ? mergeCommonFields({
+          fields: fieldsPerFocusedField,
+        })
+      : fieldsPerFocusedField.flat();
+  }, [editorContext, focussedField]);
 
   return (
     <>
@@ -63,4 +67,4 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = (props) => {
       <InlineSettings fields={mergedFields} />
     </>
   );
-};
+});
diff --git a/packages/editor/src/EditorTopBar.tsx b/packages/editor/src/EditorTopBar.tsx
index d480bc28..ad44b9a5 100644
--- a/packages/editor/src/EditorTopBar.tsx
+++ b/packages/editor/src/EditorTopBar.tsx
@@ -12,7 +12,7 @@ import {
   TooltipTrigger,
   Typography,
 } from "@easyblocks/design-system";
-import React, { ReactNode, useRef } from "react";
+import React, { ReactNode, useRef, useCallback, memo } from "react";
 import styled from "styled-components";
 import { useOnClickNTimes } from "./useOnClickNTimes";
 
@@ -73,7 +73,7 @@ const TopBarCenter = styled.div`
   transform: translate(-50%, -50%);
 `;
 
-export const EditorTopBar: React.FC<{
+interface EditorTopBarProps {
   saveLabel: string;
   onClose?: () => void;
   onIsEditingChange: () => void;
@@ -89,104 +89,113 @@ export const EditorTopBar: React.FC<{
   onAdminModeChange: (x: boolean) => void;
   hideCloseButton: boolean;
   readOnly: boolean;
-}> = ({
-  onClose,
-  onViewportChange,
-  devices,
-  viewport,
-  onIsEditingChange,
-  isEditing,
-  onUndo,
-  onRedo,
-  onAdminModeChange,
-  hideCloseButton,
-  readOnly,
-}) => {
-  const headingRef = useRef<HTMLDivElement>(null);
+}
 
-  useOnClickNTimes(headingRef, 5, () => {
-    onAdminModeChange(true);
-  });
+export const EditorTopBar = memo(
+  ({
+    onClose,
+    onViewportChange,
+    devices,
+    viewport,
+    onIsEditingChange,
+    isEditing,
+    onUndo,
+    onRedo,
+    onAdminModeChange,
+    hideCloseButton,
+    readOnly,
+  }: EditorTopBarProps): JSX.Element => {
+    const headingRef = useRef<HTMLDivElement>(null);
 
-  return (
-    <TopBar ref={headingRef}>
-      <TopBarLeft>
-        {!hideCloseButton && (
-          <>
-            <ButtonGhost
-              icon={Icons.Close}
-              hideLabel
-              onClick={() => {
-                if (onClose) {
-                  onClose();
-                }
-              }}
-            >
-              Close
-            </ButtonGhost>
+    const onAdminModeChangeCallback = useCallback(() => {
+      onAdminModeChange(true);
+    }, [onAdminModeChange]);
 
-            <div
-              style={{ height: "100%", background: Colors.black10, width: 1 }}
-            />
-          </>
-        )}
-        <ButtonGhost
-          icon={Icons.Undo}
-          hideLabel
-          onClick={() => {
-            onUndo();
-          }}
-        >
-          Undo
-        </ButtonGhost>
-        <ButtonGhost
-          icon={Icons.Redo}
-          hideLabel
-          onClick={() => {
-            onRedo();
-          }}
-        >
-          Redo
-        </ButtonGhost>
-        {readOnly && <Label>Read-Only</Label>}
-      </TopBarLeft>
+    useOnClickNTimes(headingRef, 5, onAdminModeChangeCallback);
+
+    return (
+      <TopBar ref={headingRef}>
+        <TopBarLeft>
+          {!hideCloseButton && (
+            <>
+              <ButtonGhost
+                icon={Icons.Close}
+                hideLabel
+                onClick={() => {
+                  if (onClose) {
+                    onClose();
+                  }
+                }}
+              >
+                Close
+              </ButtonGhost>
 
-      <TopBarCenter>
-        <DeviceSwitch
-          devices={devices}
-          deviceId={viewport}
-          onDeviceChange={onViewportChange}
-        />
-      </TopBarCenter>
+              <div
+                style={{ height: "100%", background: Colors.black10, width: 1 }}
+              />
+            </>
+          )}
 
-      <TopBarRight>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            gap: "6px",
-            alignItems: "center",
-          }}
-        >
-          <Typography
-            variant={"body"}
-            component="label"
-            htmlFor="easyblocks-edit-mode-button"
+          <ButtonGhost
+            icon={Icons.Undo}
+            hideLabel
+            onClick={() => {
+              onUndo();
+            }}
           >
-            Edit mode
-          </Typography>{" "}
-          <Toggle
-            name="easyblocks-edit-mode-button"
-            checked={isEditing}
-            onChange={() => {
-              onIsEditingChange();
+            Undo
+          </ButtonGhost>
+
+          <ButtonGhost
+            icon={Icons.Redo}
+            hideLabel
+            onClick={() => {
+              onRedo();
             }}
+          >
+            Redo
+          </ButtonGhost>
+
+          {readOnly && <Label>Read-Only</Label>}
+        </TopBarLeft>
+
+        <TopBarCenter>
+          <DeviceSwitch
+            devices={devices}
+            deviceId={viewport}
+            onDeviceChange={onViewportChange}
           />
-        </div>
-      </TopBarRight>
-    </TopBar>
-  );
-};
+        </TopBarCenter>
+
+        <TopBarRight>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: "6px",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              variant={"body"}
+              component="label"
+              htmlFor="easyblocks-edit-mode-button"
+            >
+              Edit mode
+            </Typography>{" "}
+            <Toggle
+              name="easyblocks-edit-mode-button"
+              checked={isEditing}
+              onChange={() => {
+                onIsEditingChange();
+              }}
+            />
+          </div>
+        </TopBarRight>
+      </TopBar>
+    );
+  }
+);
 
 const DEVICE_ID_TO_ICON: Record<
   Devices[number]["id"] | "fit-screen",
@@ -350,57 +359,59 @@ const DEVICE_ID_TO_ICON: Record<
   ),
 };
 
-function DeviceSwitch({
-  deviceId,
-  devices,
-  onDeviceChange,
-}: {
+interface DeviceSwitchProps {
   devices: Devices;
   deviceId: string;
   onDeviceChange: (deviceId: string) => void;
-}) {
-  return (
-    <ToggleGroup
-      value={deviceId}
-      onChange={(deviceId) => {
+}
+
+const DeviceSwitch = memo<DeviceSwitchProps>(
+  ({ deviceId, devices, onDeviceChange }) => {
+    const onChange = useCallback(
+      (deviceId: string): void => {
         if (deviceId === "") {
           return;
         }
 
         onDeviceChange(deviceId);
-      }}
-    >
-      {devices.map((d) => {
-        if (d.hidden) {
-          return null;
-        }
+      },
+      [onDeviceChange]
+    );
 
-        return (
-          <Tooltip key={d.id}>
-            <TooltipTrigger>
-              <ToggleGroupItem value={d.id}>
-                {DEVICE_ID_TO_ICON[d.id]}
-              </ToggleGroupItem>
-            </TooltipTrigger>
+    return (
+      <ToggleGroup value={deviceId} onChange={onChange}>
+        {devices.map((d) => {
+          if (d.hidden) {
+            return null;
+          }
 
-            <TooltipContent>
-              <Typography color="white">{d.label ?? d.id}</Typography>
-            </TooltipContent>
-          </Tooltip>
-        );
-      })}
+          return (
+            <Tooltip key={d.id}>
+              <TooltipTrigger>
+                <ToggleGroupItem value={d.id}>
+                  {DEVICE_ID_TO_ICON[d.id]}
+                </ToggleGroupItem>
+              </TooltipTrigger>
 
-      <Tooltip>
-        <TooltipTrigger>
-          <ToggleGroupItem value="fit-screen">
-            {DEVICE_ID_TO_ICON["fit-screen"]}
-          </ToggleGroupItem>
-        </TooltipTrigger>
+              <TooltipContent>
+                <Typography color="white">{d.label ?? d.id}</Typography>
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
 
-        <TooltipContent>
-          <Typography color="white">Fit screen</Typography>
-        </TooltipContent>
-      </Tooltip>
-    </ToggleGroup>
-  );
-}
+        <Tooltip>
+          <TooltipTrigger>
+            <ToggleGroupItem value="fit-screen">
+              {DEVICE_ID_TO_ICON["fit-screen"]}
+            </ToggleGroupItem>
+          </TooltipTrigger>
+
+          <TooltipContent>
+            <Typography color="white">Fit screen</Typography>
+          </TooltipContent>
+        </Tooltip>
+      </ToggleGroup>
+    );
+  }
+);
diff --git a/packages/editor/src/ModalPicker.tsx b/packages/editor/src/ModalPicker.tsx
index d66b5822..a534b80b 100644
--- a/packages/editor/src/ModalPicker.tsx
+++ b/packages/editor/src/ModalPicker.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback, useMemo, memo } from "react";
 import {
   NoCodeComponentEntry,
   ComponentSchemaProp,
@@ -9,65 +10,78 @@ import {
   normalize,
 } from "@easyblocks/core/_internals";
 import { dotNotationGet } from "@easyblocks/utils";
-import React, { FC } from "react";
+
 import { useEditorContext } from "./EditorContext";
-import { SearchableSmallPickerModal } from "./SearchableSmallPickerModal";
-import { SectionPickerModal } from "./SectionPicker";
+// import { SearchableSmallPickerModal } from "./SearchableSmallPickerModal";
+// import { SectionPickerModal } from "./SectionPicker";
 import { TemplatePicker, TemplatesDictionary } from "./TemplatePicker";
 import { OpenComponentPickerConfig } from "./types";
 import { unrollAcceptsFieldIntoComponents } from "./unrollAcceptsFieldIntoComponents";
 
-type ModalProps = {
+interface ModalProps {
   config: OpenComponentPickerConfig;
   onClose: (config?: NoCodeComponentEntry) => void;
   pickers?: Record<string, TemplatePicker>;
-};
+}
 
-export const ModalPicker: FC<ModalProps> = ({ config, onClose, pickers }) => {
+export const ModalPicker = memo(({ config, onClose, pickers }: ModalProps) => {
   const editorContext = useEditorContext();
   const { form } = editorContext;
 
-  const split = config.path.split("."); // TODO: right now only for collections
-  const parentPath = split.slice(0, split.length - 1).join(".");
-  const fieldName = split[split.length - 1];
+  const [fieldName, parentPath] = useMemo(() => {
+    const split = config.path.split("."); // TODO: right now only for collections
+    const parentPath = split.slice(0, split.length - 1).join(".");
+    const fieldName = split[split.length - 1];
+
+    return [fieldName, parentPath];
+  }, [config.path]);
 
-  const parentData: NoCodeComponentEntry = dotNotationGet(
-    form.values,
-    parentPath
+  const parentData: NoCodeComponentEntry = useMemo(
+    () => dotNotationGet(form.values, parentPath),
+    [form.values, parentPath]
   );
-  const schemaProp = findComponentDefinition(
-    parentData,
-    editorContext
-  )!.schema.find((x) => x.prop === fieldName) as ComponentSchemaProp;
 
-  const componentTypes = config.componentTypes ?? schemaProp.accepts;
-  const components = unrollAcceptsFieldIntoComponents(
-    componentTypes,
-    editorContext
+  const schemaProp = useMemo(
+    () =>
+      findComponentDefinition(parentData, editorContext)?.schema.find(
+        (x) => x.prop === fieldName
+      ) as ComponentSchemaProp,
+    [editorContext, fieldName, parentData]
   );
 
-  let templatesDictionary: TemplatesDictionary | undefined = undefined;
+  const componentTypes = config.componentTypes ?? schemaProp.accepts;
 
-  if (editorContext.templates) {
-    templatesDictionary = {};
+  const templatesDictionary = useMemo(() => {
+    const components = unrollAcceptsFieldIntoComponents(
+      componentTypes,
+      editorContext
+    );
 
-    components.forEach((component) => {
-      templatesDictionary![component.id] = {
-        component,
-        templates: [],
-      };
+    let templatesDictionary: TemplatesDictionary | undefined = undefined;
 
-      editorContext.templates!.forEach((template) => {
-        if (component.id === template.entry._component) {
-          templatesDictionary![component.id].templates.push(template);
+    if (editorContext.templates) {
+      templatesDictionary = {};
+
+      for (const component of components) {
+        templatesDictionary[component.id] = {
+          component,
+          templates: [],
+        };
+
+        for (const template of editorContext.templates) {
+          if (component.id === template.entry._component) {
+            templatesDictionary[component.id].templates.push(template);
+          }
         }
-      });
 
-      if (templatesDictionary![component.id].templates.length === 0) {
-        delete templatesDictionary![component.id];
+        if (templatesDictionary[component.id].templates.length === 0) {
+          delete templatesDictionary[component.id];
+        }
       }
-    });
-  }
+    }
+
+    return templatesDictionary;
+  }, [componentTypes, editorContext]);
 
   const picker = schemaProp.picker ?? "compact";
 
@@ -78,36 +92,39 @@ export const ModalPicker: FC<ModalProps> = ({ config, onClose, pickers }) => {
   //
   // const pickerMode = schemaProp.picker || defaultPickerMode;
 
-  const close = (config: NoCodeComponentEntry) => {
-    const _itemProps = {
-      [parentData._component]: {
-        [fieldName]: {},
-      },
-    };
-
-    const newComponent = fieldName.startsWith("$")
-      ? config
-      : duplicateConfig(
-          normalize(
-            {
-              ...config,
-              _itemProps,
-            },
-            editorContext
-          ),
-          editorContext
-        );
-
-    onClose(newComponent);
-  };
-
-  const onModalClose = (template?: Template) => {
-    if (template) {
-      close(normalize(template.entry, editorContext));
-    } else {
-      onClose();
-    }
-  };
+  const onModalClose = useCallback(
+    (template?: Template) => {
+      function close(config: NoCodeComponentEntry) {
+        const _itemProps = {
+          [parentData._component]: {
+            [fieldName]: {},
+          },
+        };
+
+        const newComponent = fieldName.startsWith("$")
+          ? config
+          : duplicateConfig(
+              normalize(
+                {
+                  ...config,
+                  _itemProps,
+                },
+                editorContext
+              ),
+              editorContext
+            );
+
+        onClose(newComponent);
+      }
+
+      if (template) {
+        close(normalize(template.entry, editorContext));
+      } else {
+        onClose();
+      }
+    },
+    [editorContext, fieldName, onClose, parentData._component]
+  );
 
   return pickers?.[picker] ? (
     pickers[picker]({
@@ -119,4 +136,4 @@ export const ModalPicker: FC<ModalProps> = ({ config, onClose, pickers }) => {
   ) : (
     <div>Unknown picker: {picker}</div>
   );
-};
+});
diff --git a/packages/editor/src/SidebarFooter.tsx b/packages/editor/src/SidebarFooter.tsx
index ecac7a8e..e4d1e2b3 100644
--- a/packages/editor/src/SidebarFooter.tsx
+++ b/packages/editor/src/SidebarFooter.tsx
@@ -10,7 +10,7 @@ import {
   Fonts,
 } from "@easyblocks/design-system";
 import { dotNotationGet } from "@easyblocks/utils";
-import * as React from "react";
+import React, { memo } from "react";
 import styled from "styled-components";
 import { useEditorContext } from "./EditorContext";
 import { pathToCompiledPath } from "./pathToCompiledPath";
@@ -22,7 +22,11 @@ const IdWrapper = styled.div`
   color: ${Colors.black40};
 `;
 
-export function SidebarFooter(props: { paths: string[] }) {
+interface SidebarFooterProps {
+  paths: string[];
+}
+
+export const SidebarFooter = memo((props: SidebarFooterProps) => {
   const editorContext = useEditorContext();
   const { form, isAdminMode } = editorContext;
 
@@ -102,4 +106,4 @@ export function SidebarFooter(props: { paths: string[] }) {
       </IdWrapper>
     </div>
   );
-}
+});
diff --git a/packages/editor/src/inline-settings.tsx b/packages/editor/src/inline-settings.tsx
index 08aa4252..b2914740 100644
--- a/packages/editor/src/inline-settings.tsx
+++ b/packages/editor/src/inline-settings.tsx
@@ -1,34 +1,38 @@
-import { InternalField } from "@easyblocks/core/_internals";
-import React, { MouseEvent } from "react";
+import React, { MouseEvent, useCallback, memo } from "react";
 import styled from "styled-components";
+
+import type { InternalField } from "@easyblocks/core/_internals";
+
 import { useEditorContext } from "./EditorContext";
 import { SidebarFooter } from "./SidebarFooter";
 import { FieldsBuilder } from "./tinacms/form-builder";
 import { StyleReset } from "./tinacms/styles";
 
+const resetStyle = { height: "100%" };
+
 interface InlineSettingsProps {
   fields: InternalField[];
 }
 
-export function InlineSettings({ fields }: InlineSettingsProps) {
+export const InlineSettings = memo(({ fields }: InlineSettingsProps) => {
   const hasNoExtraFields = !(fields && fields.length);
 
+  const onClick = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
   if (hasNoExtraFields) {
     return null;
   }
 
   return (
-    <StyleReset
-      onClick={(e: MouseEvent) => {
-        e.stopPropagation();
-      }}
-      style={{ height: "100%" }}
-    >
+    <StyleReset onClick={onClick} style={resetStyle}>
       {/* IMPORTANT: This stop propagation fixes issues with toggle unclicking */}
       <SettingsContent fields={fields} />
     </StyleReset>
   );
-}
+});
+
 interface SettingsContentProps {
   title?: string;
   fields: InternalField[];
@@ -38,7 +42,7 @@ function SettingsContent({ fields }: SettingsContentProps) {
   const { form, focussedField } = useEditorContext();
 
   return (
-    <FormBody id={"sidebar-panels-root"}>
+    <FormBody id="sidebar-panels-root">
       <Wrapper>
         <FieldsBuilder form={form} fields={fields} />
         <SidebarFooter paths={focussedField} />
diff --git a/packages/editor/src/parseQueryParams.ts b/packages/editor/src/parseQueryParams.ts
index b212292a..55fe8458 100644
--- a/packages/editor/src/parseQueryParams.ts
+++ b/packages/editor/src/parseQueryParams.ts
@@ -1,4 +1,4 @@
-type EditorSearchParams = {
+interface EditorSearchParams {
   readOnly: boolean | null;
   documentId: string | null;
   templateId: string | null;
@@ -7,10 +7,10 @@ type EditorSearchParams = {
   locale: string | null;
   preview: boolean;
   debug: boolean;
-};
+}
 
-export function parseQueryParams() {
-  const searchParams = new URLSearchParams(window.location.search);
+export function parseQueryParams(strSearch = window.location.search) {
+  const searchParams = new URLSearchParams(strSearch);
 
   const readOnly =
     searchParams.get("readOnly") === "true"
diff --git a/packages/editor/src/selectionFrame/AddButton.tsx b/packages/editor/src/selectionFrame/AddButton.tsx
index 759e0214..debab6a3 100644
--- a/packages/editor/src/selectionFrame/AddButton.tsx
+++ b/packages/editor/src/selectionFrame/AddButton.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { IconButton, ICON_BUTTON_SIZE } from "../tinacms/styles";
+
+import { IconButton } from "../tinacms/styles";
 import {
   AFTER_ADD_BUTTON_DISPLAY,
   AFTER_ADD_BUTTON_LEFT,
@@ -10,6 +11,8 @@ import {
   BEFORE_ADD_BUTTON_TOP,
 } from "./cssVariables";
 
+export { ICON_BUTTON_SIZE as ADD_BUTTON_SIZE } from "../tinacms/styles";
+
 interface AddButtonProps {
   position: "before" | "after";
   index?: number;
@@ -17,57 +20,66 @@ interface AddButtonProps {
   onClick?: () => void;
 }
 
-function AddButton({ position, index, offset, onClick }: AddButtonProps) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const addBlockButtonRef = React.useRef<HTMLButtonElement>(null);
-
-  const handleOpenBlockMenu = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
-
-    // Custom add action
-    if (onClick) {
-      onClick();
-      return;
-    }
-  };
-
-  React.useEffect(() => {
-    const inactivateBlockMenu = () => setIsOpen(false);
-    document.addEventListener("mouseup", inactivateBlockMenu, false);
-    return () => document.removeEventListener("mouseup", inactivateBlockMenu);
-  }, []);
-
-  return (
-    <AddButtonWrapper
-      index={index}
-      offset={offset}
-      position={position}
-      isOpen={isOpen}
-    >
-      <AddIconButton
-        ref={addBlockButtonRef}
-        onClick={handleOpenBlockMenu}
+export const AddButton = React.memo(
+  ({ position, index, offset, onClick }: AddButtonProps): JSX.Element => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const addBlockButtonRef = React.useRef<HTMLButtonElement>(null);
+
+    const handleOpenBlockMenu = React.useCallback<React.MouseEventHandler>(
+      (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+
+        // Custom add action
+        if (onClick) {
+          onClick();
+          return;
+        }
+      },
+      [onClick]
+    );
+
+    React.useEffect(() => {
+      function inactivateBlockMenu() {
+        setIsOpen(false);
+      }
+
+      document.addEventListener("mouseup", inactivateBlockMenu, false);
+
+      return () => {
+        document.removeEventListener("mouseup", inactivateBlockMenu);
+      };
+    }, []);
+
+    return (
+      <AddButtonWrapper
+        index={index}
+        offset={offset}
+        position={position}
         isOpen={isOpen}
-        primary
-        small
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="23"
-          height="23"
-          viewBox="0 0 23 23"
-          fill="none"
+        <AddIconButton
+          ref={addBlockButtonRef}
+          onClick={handleOpenBlockMenu}
+          isOpen={isOpen}
+          primary
+          small
         >
-          <line x1="11.5" y1="4" x2="11.5" y2="19" stroke="currentColor" />
-          <line x1="4" y1="11.5" x2="19" y2="11.5" stroke="currentColor" />
-        </svg>
-      </AddIconButton>
-    </AddButtonWrapper>
-  );
-}
-
-export { AddButton, ICON_BUTTON_SIZE as ADD_BUTTON_SIZE };
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="23"
+            height="23"
+            viewBox="0 0 23 23"
+            fill="none"
+          >
+            <line x1="11.5" y1="4" x2="11.5" y2="19" stroke="currentColor" />
+            <line x1="4" y1="11.5" x2="19" y2="11.5" stroke="currentColor" />
+          </svg>
+        </AddIconButton>
+      </AddButtonWrapper>
+    );
+  }
+);
 
 interface AddMenuProps {
   isOpen?: boolean;
diff --git a/packages/editor/src/selectionFrame/SelectionFrame.tsx b/packages/editor/src/selectionFrame/SelectionFrame.tsx
index 6b08f1ae..e2896cdb 100644
--- a/packages/editor/src/selectionFrame/SelectionFrame.tsx
+++ b/packages/editor/src/selectionFrame/SelectionFrame.tsx
@@ -9,7 +9,7 @@ import {
   parsePath,
 } from "@easyblocks/core/_internals";
 import { dotNotationGet } from "@easyblocks/utils";
-import React, { useLayoutEffect } from "react";
+import React, { useLayoutEffect, useCallback, memo } from "react";
 import { EditorContextType, useEditorContext } from "../EditorContext";
 import { pathToCompiledPath } from "../pathToCompiledPath";
 import { AddButton } from "./AddButton";
@@ -28,138 +28,144 @@ import {
   RICH_TEXT_PART_CONFIG_PATH_REGEXP,
 } from "../utils/isConfigPathRichTextPart";
 
-type SelectionFrameProps = {
+interface SelectionFrameProps {
   width: number;
   height: number;
   transform: string;
-};
-
-function SelectionFrame({ width, height, transform }: SelectionFrameProps) {
-  const editorContext = useEditorContext();
-  const { focussedField, form, actions } = editorContext;
-
-  const compiledFocusedField =
-    focussedField.length === 1
-      ? pathToCompiledPath(focussedField[0], editorContext)
-      : undefined;
-
-  const compiledComponentConfig: CompiledShopstoryComponentConfig =
-    compiledFocusedField
-      ? dotNotationGet(
-          editorContext.compiledComponentConfig,
-          compiledFocusedField
-        )
-      : undefined;
-
-  const { direction = "vertical" } = compiledComponentConfig?.__editing ?? {};
-
-  const isAddingEnabled = isAddingEnabledForSelectedFields(
-    focussedField,
-    editorContext
-  );
+}
 
-  useLayoutEffect(() => {
-    if (focussedField.length === 0) {
-      hideAddButtons();
-    }
-  }, [focussedField]);
+export const SelectionFrame = memo(
+  ({ width, height, transform }: SelectionFrameProps): JSX.Element => {
+    const editorContext = useEditorContext();
+    const { focussedField, form, actions } = editorContext;
+
+    const compiledFocusedField =
+      focussedField.length === 1
+        ? pathToCompiledPath(focussedField[0], editorContext)
+        : undefined;
+
+    const compiledComponentConfig: CompiledShopstoryComponentConfig =
+      compiledFocusedField
+        ? dotNotationGet(
+            editorContext.compiledComponentConfig,
+            compiledFocusedField
+          )
+        : undefined;
+
+    const { direction = "vertical" } = compiledComponentConfig?.__editing ?? {};
+
+    const isAddingEnabled = isAddingEnabledForSelectedFields(
+      focussedField,
+      editorContext
+    );
 
-  useLayoutEffect(() => {
-    function handleSelectionFrameMessages(
-      event: SelectionFramePositionChangedEvent
-    ) {
-      if (!isAddingEnabled) {
+    useLayoutEffect(() => {
+      if (focussedField.length === 0) {
         hideAddButtons();
-        return;
       }
+    }, [focussedField]);
 
-      if (
-        event.data.type ===
-        "@easyblocks-editor/selection-frame-position-changed"
+    useLayoutEffect(() => {
+      function handleSelectionFrameMessages(
+        event: SelectionFramePositionChangedEvent
       ) {
-        updateAddButtons(
-          direction,
-          event.data.payload.target,
-          {
-            width,
-            height,
-          },
-          event.data.payload.container
-        );
+        if (!isAddingEnabled) {
+          hideAddButtons();
+          return;
+        }
+
+        if (
+          event.data.type ===
+          "@easyblocks-editor/selection-frame-position-changed"
+        ) {
+          updateAddButtons(
+            direction,
+            event.data.payload.target,
+            {
+              width,
+              height,
+            },
+            event.data.payload.container
+          );
+        }
       }
-    }
 
-    window.addEventListener("message", handleSelectionFrameMessages);
+      window.addEventListener("message", handleSelectionFrameMessages);
 
-    return () => {
-      window.removeEventListener("message", handleSelectionFrameMessages);
-    };
-  }, [direction, height, isAddingEnabled, width]);
+      return () => {
+        window.removeEventListener("message", handleSelectionFrameMessages);
+      };
+    }, [direction, height, isAddingEnabled, width]);
 
-  async function handleAddButtonClick(which: "before" | "after") {
-    let path = focussedField.length === 1 ? focussedField[0] : undefined;
+    const handleAddButtonClick = useCallback(
+      async (which: "before" | "after") => {
+        let path = focussedField.length === 1 ? focussedField[0] : undefined;
 
-    if (!path) {
-      return;
-    }
+        if (!path) {
+          return;
+        }
 
-    if (isConfigPathRichTextPart(path)) {
-      path = path.replace(RICH_TEXT_PART_CONFIG_PATH_REGEXP, "");
-    }
+        if (isConfigPathRichTextPart(path)) {
+          path = path.replace(RICH_TEXT_PART_CONFIG_PATH_REGEXP, "");
+        }
 
-    const { parent, index } = parsePath(path, form);
+        const { parent, index } = parsePath(path, form);
 
-    if (!parent || index === undefined) {
-      return;
-    }
+        if (!parent || index === undefined) {
+          return;
+        }
 
-    const definition = findComponentDefinitionById(
-      parent.templateId,
-      editorContext
-    );
+        const definition = findComponentDefinitionById(
+          parent.templateId,
+          editorContext
+        );
 
-    const schemaProp = definition?.schema.find(
-      (schemaProp) => schemaProp.prop === parent.fieldName
+        const schemaProp = definition?.schema.find(
+          (schemaProp) => schemaProp.prop === parent.fieldName
+        );
+
+        if (!schemaProp) {
+          return;
+        }
+
+        const parentPath =
+          parent.path + (parent.path === "" ? "" : ".") + parent.fieldName;
+
+        const config = await actions.openComponentPicker({ path: parentPath });
+
+        if (config) {
+          actions.insertItem({
+            name:
+              schemaProp.type === "component-collection-localised"
+                ? `${parentPath}.${editorContext.contextParams.locale}`
+                : parentPath,
+            index: which === "before" ? index : index + 1,
+            block: config,
+          });
+        }
+      },
+      [editorContext, focussedField, form, actions]
     );
 
-    if (!schemaProp) {
-      return;
-    }
+    const onBeforeClick = useCallback((): void => {
+      handleAddButtonClick("before");
+    }, [handleAddButtonClick]);
 
-    const parentPath =
-      parent.path + (parent.path === "" ? "" : ".") + parent.fieldName;
+    const onAfterClick = useCallback((): void => {
+      handleAddButtonClick("after");
+    }, [handleAddButtonClick]);
 
-    const config = await actions.openComponentPicker({ path: parentPath });
+    return (
+      <Wrapper>
+        <FrameWrapper width={width} height={height} transform={transform}>
+          <AddButton position="before" onClick={onBeforeClick} />
 
-    if (config) {
-      actions.insertItem({
-        name:
-          schemaProp.type === "component-collection-localised"
-            ? `${parentPath}.${editorContext.contextParams.locale}`
-            : parentPath,
-        index: which === "before" ? index : index + 1,
-        block: config,
-      });
-    }
+          <AddButton position="after" onClick={onAfterClick} />
+        </FrameWrapper>
+      </Wrapper>
+    );
   }
-
-  return (
-    <Wrapper>
-      <FrameWrapper width={width} height={height} transform={transform}>
-        <AddButton
-          position="before"
-          onClick={() => handleAddButtonClick("before")}
-        />
-        <AddButton
-          position="after"
-          onClick={() => handleAddButtonClick("after")}
-        />
-      </FrameWrapper>
-    </Wrapper>
-  );
-}
-
-export { SelectionFrame };
+);
 
 function updateAddButtons(
   direction: Required<EditingInfoBase>["direction"],
diff --git a/packages/editor/src/tinacms/fields/plugins/LocalFIeld.tsx b/packages/editor/src/tinacms/fields/plugins/LocalFIeld.tsx
index 1c470485..c6621c0c 100644
--- a/packages/editor/src/tinacms/fields/plugins/LocalFIeld.tsx
+++ b/packages/editor/src/tinacms/fields/plugins/LocalFIeld.tsx
@@ -1,45 +1,40 @@
-import { LocalValue } from "@easyblocks/core";
-import { InternalField } from "@easyblocks/core/_internals";
 import React from "react";
 import { FieldRenderProps } from "react-final-form";
-import { EditorContextType, useEditorContext } from "../../../EditorContext";
-import { MissingWidget } from "./MissingWidget";
-import { wrapFieldsWithMeta } from "./wrapFieldWithMeta";
-
-type InlineTypesResult = Record<
-  string,
-  Extract<EditorContextType["types"][string], { type: "inline" }>
->;
 
-function useInlineTypes(): InlineTypesResult {
-  const editorContext = useEditorContext();
+import type { LocalValue } from "@easyblocks/core";
+import type { InternalField } from "@easyblocks/core/_internals";
 
-  const tokenTypes = Object.fromEntries(
-    Object.entries(editorContext.types).filter<
-      [string, InlineTypesResult[string]]
-    >(
-      (
-        typeDefinitionEntry
-      ): typeDefinitionEntry is [string, InlineTypesResult[string]] => {
-        return typeDefinitionEntry[1].type === "inline";
-      }
-    )
-  );
+import { useEditorContext } from "../../../EditorContext";
 
-  return tokenTypes;
-}
+import { MissingWidget } from "./MissingWidget";
+import { wrapFieldsWithMeta } from "./wrapFieldWithMeta";
 
-const LocalFieldPlugin = {
+export const LocalFieldPlugin = {
   name: "local",
   Component: wrapFieldsWithMeta(function LocalField({
     field,
     input,
-  }: FieldRenderProps<LocalValue<any>> & {
+  }: FieldRenderProps<LocalValue<unknown>> & {
     field: InternalField;
   }) {
-    const inlineTypes = useInlineTypes();
-    const inlineTypeDefinition = inlineTypes[field.schemaProp.type];
-    const WidgetComponent = inlineTypeDefinition?.widget.component;
+    const { types } = useEditorContext();
+    const typeDefinition = types[field.schemaProp.type];
+
+    const onChange = React.useCallback(
+      (value: unknown) => {
+        input.onChange({
+          value,
+          widgetId: input.value.widgetId,
+        });
+      },
+      [input]
+    );
+
+    if (typeDefinition.type !== "inline") {
+      return <MissingWidget type={field.schemaProp.type} />;
+    }
+
+    const WidgetComponent = typeDefinition?.widget.component;
 
     if (!WidgetComponent) {
       return <MissingWidget type={field.schemaProp.type} />;
@@ -48,18 +43,11 @@ const LocalFieldPlugin = {
     return (
       <WidgetComponent
         value={input.value.value}
-        onChange={(value) => {
-          input.onChange({
-            value,
-            widgetId: input.value.widgetId,
-          });
-        }}
         params={
           "params" in field.schemaProp ? field.schemaProp.params : undefined
         }
+        onChange={onChange}
       />
     );
   }),
 };
-
-export { LocalFieldPlugin };
diff --git a/packages/editor/src/tinacms/form-builder/fields-builder.tsx b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
index 4aad828a..9a0ea6ff 100644
--- a/packages/editor/src/tinacms/form-builder/fields-builder.tsx
+++ b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
@@ -1,7 +1,7 @@
 import { InternalField } from "@easyblocks/core/_internals";
 import { Colors, Fonts, Typography } from "@easyblocks/design-system";
 import { toArray } from "@easyblocks/utils";
-import React, { useContext } from "react";
+import React, { useContext, useMemo, memo } from "react";
 import styled, { css } from "styled-components";
 import { useEditorContext } from "../../EditorContext";
 import { Form } from "../../form";
@@ -47,7 +47,7 @@ function shouldFieldBeDisplayed(field: InternalField): boolean {
   return true;
 }
 
-const FIELD_COMPONENTS: Array<FieldPlugin> = [
+const FIELD_COMPONENTS: Map<string, FieldPlugin> = [
   TextFieldPlugin,
   NumberFieldPlugin,
   ToggleFieldPlugin,
@@ -62,7 +62,9 @@ const FIELD_COMPONENTS: Array<FieldPlugin> = [
   TokenFieldPlugin,
   IdentityFieldPlugin,
   LocalFieldPlugin,
-];
+].reduce((map, plugin) => {
+  return map.set(plugin.name, plugin);
+}, new Map<string, FieldPlugin>());
 
 export function FieldBuilder({
   form,
@@ -76,9 +78,7 @@ export function FieldBuilder({
     return null;
   }
 
-  const fieldComponent = FIELD_COMPONENTS.find(
-    (component) => component.name === (field.component as string)
-  );
+  const fieldComponent = FIELD_COMPONENTS.get(field.component as string);
 
   const { onChange, getValue } = createFieldController({
     field,
@@ -149,28 +149,39 @@ export interface FieldsBuilderProps {
   fields: InternalField[];
 }
 
-export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
+export const FieldsBuilder = memo(({ form, fields }: FieldsBuilderProps) => {
   const editorContext = useEditorContext();
   const panelContext = useContext(PanelContext);
-  const grouped: Record<string, Array<InternalField>> = {};
-  const ungrouped: Array<InternalField> = [];
-
-  fields.forEach((field) => {
-    if (!shouldFieldBeDisplayed(field)) {
-      return;
-    }
-
-    if (field.group) {
-      grouped[field.group] = grouped[field.group] || [];
-      grouped[field.group].push(field);
-    } else {
-      if (field.component === "identity") {
+
+  const { grouped, ungrouped } = useMemo(() => {
+    const grouped = new Map<string, InternalField[]>();
+    const ungrouped: InternalField[] = [];
+
+    fields.forEach((field) => {
+      if (!shouldFieldBeDisplayed(field)) {
         return;
       }
 
-      ungrouped.push(field);
-    }
-  });
+      if (field.group) {
+        let list = grouped.get(field.group);
+
+        if (list === undefined) {
+          list = [];
+          grouped.set(field.group, list);
+        }
+
+        list.push(field);
+      } else {
+        if (field.component === "identity") {
+          return;
+        }
+
+        ungrouped.push(field);
+      }
+    });
+
+    return { grouped, ungrouped };
+  }, [fields]);
 
   const horizontalLine = (
     <div
@@ -195,13 +206,16 @@ export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
       {identityField !== undefined && (
         <React.Fragment>
           <FieldBuilder field={identityField} form={form} />
+
           {horizontalLine}
         </React.Fragment>
       )}
-      {Object.keys(grouped).map((groupName) => (
+
+      {Array.from(grouped.entries()).map(([groupName, groupFields]) => (
         <div key={groupName}>
           <FieldsGroupLabel>{groupName}</FieldsGroupLabel>
-          {grouped[groupName].map((field, index, fields) => (
+
+          {groupFields.map((field, index, fields) => (
             <div
               key={generateFieldKey(field, breakpointIndex)}
               css={css`
@@ -215,9 +229,11 @@ export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
               />
             </div>
           ))}
+
           {horizontalLine}
         </div>
       ))}
+
       {ungrouped.map((field, index, fields) => (
         <div
           key={generateFieldKey(field, breakpointIndex)}
@@ -232,10 +248,11 @@ export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
           />
         </div>
       ))}
+
       {horizontalLine}
     </FieldsGroup>
   );
-}
+});
 
 function generateFieldKey(
   field: InternalField,
diff --git a/packages/editor/src/tinacms/form-builder/utils/createFieldController.ts b/packages/editor/src/tinacms/form-builder/utils/createFieldController.ts
index c2f2603f..3cd188fa 100644
--- a/packages/editor/src/tinacms/form-builder/utils/createFieldController.ts
+++ b/packages/editor/src/tinacms/form-builder/utils/createFieldController.ts
@@ -169,32 +169,34 @@ function createFieldController({
               const fallbackLocale = getFallbackLocaleForLocale(
                 contextParams.locale,
                 locales
-              )!;
-
-              const fieldNameSegments = path.split(".");
-              const localeTokenIndex = fieldNameSegments.indexOf("[locale]");
-              const localisedConfigPath = [
-                ...fieldNameSegments.slice(0, localeTokenIndex + 1),
-                "0",
-              ].join(".");
-
-              const fallbackLocaleFieldName = replaceLocaleToken(
-                localisedConfigPath,
-                fallbackLocale
               );
 
-              const localeConfigPath = replaceLocaleToken(
-                localisedConfigPath,
-                contextParams.locale
-              );
+              if (fallbackLocale) {
+                const fieldNameSegments = path.split(".");
+                const localeTokenIndex = fieldNameSegments.indexOf("[locale]");
+                const localisedConfigPath = [
+                  ...fieldNameSegments.slice(0, localeTokenIndex + 1),
+                  "0",
+                ].join(".");
+
+                const fallbackLocaleFieldName = replaceLocaleToken(
+                  localisedConfigPath,
+                  fallbackLocale
+                );
 
-              form.change(
-                localeConfigPath,
-                duplicateConfig(
-                  dotNotationGet(form.values, fallbackLocaleFieldName),
-                  editorContext
-                )
-              );
+                const localeConfigPath = replaceLocaleToken(
+                  localisedConfigPath,
+                  contextParams.locale
+                );
+
+                form.change(
+                  localeConfigPath,
+                  duplicateConfig(
+                    dotNotationGet(form.values, fallbackLocaleFieldName),
+                    editorContext
+                  )
+                );
+              }
             }
 
             path = currentLocaleFieldName;
@@ -218,13 +220,13 @@ function createFieldController({
           const parentDefinition = findComponentDefinitionById(
             templateId,
             editorContext
-          )!;
+          );
           const config = dotNotationGet(
             editorContext.form.values,
             componentPath
           );
 
-          if (parentDefinition && parentDefinition.change) {
+          if (parentDefinition?.change) {
             const values: Record<string, any> = {};
             const closestDefinedValues: Record<string, any> = {};
 
@@ -270,7 +272,7 @@ function createFieldController({
               }
 
               let pathPrefix = `${componentPath}.${schemaProp.prop}`;
-              if (pathPrefix[0] === ".") {
+              if (pathPrefix.startsWith(".")) {
                 pathPrefix = pathPrefix.substring(1);
               }
 
@@ -312,7 +314,11 @@ function createFieldController({
           const fallbackLocale = getFallbackLocaleForLocale(
             editorContext.contextParams.locale,
             editorContext.locales
-          )!;
+          );
+
+          if (!fallbackLocale) {
+            return undefined;
+          }
 
           const resolvedFieldFallbackName = replaceLocaleToken(
             fieldName,
@@ -429,7 +435,7 @@ const richTextCacheInvalidator: CacheInvalidator = (
         componentConfig &&
         componentConfig._component.startsWith("@easyblocks/rich-text")
       ) {
-        cacheKeysToRemove.push(componentConfig._id!);
+        cacheKeysToRemove.push(componentConfig._id);
       }
     });
   }
diff --git a/packages/editor/src/tinacms/react-core/use-form.ts b/packages/editor/src/tinacms/react-core/use-form.ts
index 6310681b..f788d42e 100644
--- a/packages/editor/src/tinacms/react-core/use-form.ts
+++ b/packages/editor/src/tinacms/react-core/use-form.ts
@@ -1,5 +1,7 @@
-import { InternalField } from "@easyblocks/core/_internals";
 import React from "react";
+
+import type { InternalField } from "@easyblocks/core/_internals";
+
 import { Form, FormOptions } from "../../form";
 
 interface WatchableFormValue {
@@ -29,27 +31,17 @@ export function useForm<FormShape = any>(
   options.initialValues = options.initialValues || watch.values;
 
   const [, setValues] = React.useState(options.initialValues);
-  const [form, setForm] = React.useState<Form>(() => {
+
+  const form = React.useMemo<Form>(() => {
     return createForm(options, (form: any) => {
       setValues(form.values);
     });
-  });
-
-  React.useEffect(
-    function () {
-      if (form.id === options.id) return;
-      setForm(
-        createForm(options, (form: any) => {
-          setValues(form.values);
-        })
-      );
-    },
-    [options.id]
-  );
+  }, [options.id]);
 
   const [formIsLoading, setFormIsLoading] = React.useState(() =>
     loadInitialValues ? true : false
   );
+
   const loadFormData = React.useCallback(async () => {
     if (loadInitialValues) {
       setFormIsLoading(true);
@@ -62,9 +54,10 @@ export function useForm<FormShape = any>(
         });
     }
   }, [form, setFormIsLoading]);
+
   React.useEffect(() => {
     loadFormData();
-  }, [form, loadFormData]);
+  }, [loadFormData]);
 
   useUpdateFormFields(form, watch.fields);
   useUpdateFormLabel(form, watch.label);
diff --git a/packages/editor/src/useDataSaver.ts b/packages/editor/src/useDataSaver.ts
index 66a18070..6bae1ec3 100644
--- a/packages/editor/src/useDataSaver.ts
+++ b/packages/editor/src/useDataSaver.ts
@@ -1,6 +1,7 @@
+import { useEffect, useRef, useCallback } from "react";
 import { NoCodeComponentEntry, Document } from "@easyblocks/core";
-import { deepClone, deepCompare, sleep } from "@easyblocks/utils";
-import { useEffect, useRef, useState } from "react";
+import { deepClone, deepCompare } from "@easyblocks/utils";
+
 import { EditorContextType } from "./EditorContext";
 import { getConfigSnapshot } from "./utils/config/getConfigSnapshot";
 import { addLocalizedFlag } from "./utils/locales/addLocalizedFlag";
@@ -22,12 +23,21 @@ export function useDataSaver(
    * This state variable is going to be used ONLY for comparison with local config in case of missing document.
    * It's not going to change at any time during the lifecycle of this hook.
    */
-  const [initialConfigInCaseOfMissingDocument] = useState<NoCodeComponentEntry>(
-    deepClone(editorContext.form.values)
-  );
-  const onTickRef = useRef<() => Promise<void>>(() => Promise.resolve());
+  const initialConfigInCaseOfMissingDocument =
+    useRef<NoCodeComponentEntry | null>(null);
+
+  if (initialConfigInCaseOfMissingDocument.current === null) {
+    initialConfigInCaseOfMissingDocument.current = deepClone(
+      editorContext.form.values
+    );
+  }
+
+  const editorContextRef = useRef(editorContext);
+  editorContextRef.current = editorContext;
+
+  const onTick = useCallback(async () => {
+    const { current: editorContext } = editorContextRef;
 
-  const onTick = async () => {
     // Playground mode is a special case, we don't want to save anything
     if (editorContext.readOnly) {
       return;
@@ -38,7 +48,8 @@ export function useDataSaver(
 
     const previousConfig = remoteDocument.current
       ? remoteDocument.current.entry
-      : initialConfigInCaseOfMissingDocument;
+      : (initialConfigInCaseOfMissingDocument.current as NoCodeComponentEntry);
+
     const previousConfigSnapshot = getConfigSnapshot(previousConfig);
 
     const isConfigTheSame = deepCompare(
@@ -52,7 +63,9 @@ export function useDataSaver(
     );
 
     async function runSaveCallback() {
-      await editorContext.save(remoteDocument.current!);
+      if (remoteDocument.current) {
+        await editorContext.save(remoteDocument.current);
+      }
     }
 
     // New document
@@ -73,11 +86,13 @@ export function useDataSaver(
 
       remoteDocument.current = {
         ...newDocument,
-        // @ts-ignore
+      };
+
+      Object.assign(remoteDocument.current, {
         config: {
           config: configToSaveWithLocalisedFlag,
         },
-      };
+      });
 
       await runSaveCallback();
     }
@@ -98,10 +113,6 @@ export function useDataSaver(
       if (isNewerDocumentVersionAvailable) {
         console.debug("new remote version detected, updating");
 
-        if (!latestDocument) {
-          throw new Error("unexpected error");
-        }
-
         const latestConfig = removeLocalizedFlag(
           latestDocument.entry,
           editorContext
@@ -146,48 +157,45 @@ export function useDataSaver(
         }
       }
     }
-  };
-
-  // We're keeping this in ref, because of setInterval keeping initial closure
-  onTickRef.current = onTick;
+  }, []);
 
-  const inProgress = useRef<boolean>(false);
+  const inProgress = useRef<Promise<void> | null>(null);
   const wasSaveNowCalled = useRef<boolean>(false);
 
   useEffect(() => {
     const interval = setInterval(() => {
       // We ignore ticks when previous requests are in progress
-      if (inProgress.current || wasSaveNowCalled.current) {
+      if (inProgress.current !== null || wasSaveNowCalled.current) {
         return;
       }
 
-      inProgress.current = true;
-      onTickRef.current().finally(() => {
-        inProgress.current = false;
+      inProgress.current = onTick().finally(() => {
+        inProgress.current = null;
       });
     }, 5000);
 
     return () => {
       clearInterval(interval);
     };
-  }, []);
+  }, [onTick]);
 
-  return {
-    saveNow: async () => {
-      wasSaveNowCalled.current = true;
+  const saveNow = useCallback(async () => {
+    wasSaveNowCalled.current = true;
 
-      // Wait until inProgress is false
-      while (true) {
-        if (inProgress.current) {
-          console.debug("waiting...");
-          await sleep(500);
-        } else {
-          break;
-        }
+    const { current: promise } = inProgress;
+
+    // Wait until inProgress is resolve
+    if (promise) {
+      try {
+        await promise;
+      } catch (err) {
+        // noop
       }
+    }
+
+    console.debug("Last save!");
+    await onTick();
+  }, [onTick]);
 
-      console.debug("Last save!");
-      await onTick();
-    },
-  };
+  return { saveNow };
 }
diff --git a/packages/editor/src/useEditorHistory.ts b/packages/editor/src/useEditorHistory.ts
index 77901886..11b25f93 100644
--- a/packages/editor/src/useEditorHistory.ts
+++ b/packages/editor/src/useEditorHistory.ts
@@ -1,66 +1,68 @@
-import type { NoCodeComponentEntry } from "@easyblocks/core";
-import { useRef } from "react";
+import { useMemo } from "react";
 import ReactDOM from "react-dom";
-import { EditorHistory, HistoryEntry } from "./EditorHistory";
 
-interface UseEditorHistoryParameters {
-  onChange: (editorHistoryChange: EditorHistoryChange) => void;
-}
+import type { NoCodeComponentEntry } from "@easyblocks/core";
 
-interface EditorHistoryChange {
+import { EditorHistory, HistoryEntry } from "./EditorHistory";
+
+export interface EditorHistoryChange {
   config?: NoCodeComponentEntry;
   focusedField: Array<string>;
   type: "undo" | "redo";
 }
 
-function useEditorHistory({ onChange }: UseEditorHistoryParameters) {
-  const editorHistory = useRef<EditorHistory>(new EditorHistory()).current;
+interface UseEditorHistoryParameters {
+  onChange: (editorHistoryChange: EditorHistoryChange) => void;
+}
+
+export function useEditorHistory({ onChange }: UseEditorHistoryParameters) {
+  const editorHistory = useMemo<EditorHistory>(() => new EditorHistory(), []);
 
-  function undo(): void {
-    ReactDOM.unstable_batchedUpdates(() => {
-      const entry = editorHistory.back();
+  return useMemo(() => {
+    function undo(): void {
+      ReactDOM.unstable_batchedUpdates(() => {
+        const entry = editorHistory.back();
 
-      if (entry === null) {
-        return;
-      }
+        if (entry === null) {
+          return;
+        }
 
-      const { focussedField, ...rest } = entry;
-      onChange({
-        focusedField: focussedField,
-        ...rest,
-        type: "undo",
+        const { focussedField, ...rest } = entry;
+        onChange({
+          focusedField: focussedField,
+          ...rest,
+          type: "undo",
+        });
       });
-    });
-  }
+    }
 
-  function redo() {
-    ReactDOM.unstable_batchedUpdates(() => {
-      const entry = editorHistory.forward();
+    function redo() {
+      ReactDOM.unstable_batchedUpdates(() => {
+        const entry = editorHistory.forward();
 
-      if (!entry) {
-        return null;
-      }
+        if (!entry) {
+          return null;
+        }
 
-      const { focussedField, ...rest } = entry;
+        const { focussedField, ...rest } = entry;
 
-      onChange({
-        focusedField: focussedField,
-        ...rest,
-        type: "redo",
+        onChange({
+          focusedField: focussedField,
+          ...rest,
+          type: "redo",
+        });
       });
-    });
-  }
+    }
 
-  function push(entry: HistoryEntry) {
-    editorHistory.push(entry);
-  }
+    function push(entry: HistoryEntry) {
+      editorHistory.push(entry);
+    }
 
-  return {
-    push,
-    redo,
-    undo,
-    editorHistoryInstance: editorHistory,
-  };
+    return {
+      push,
+      redo,
+      undo,
+      editorHistoryInstance: editorHistory,
+    };
+  }, [editorHistory, onChange]);
 }
-
-export { useEditorHistory };
diff --git a/packages/editor/src/useOnClickNTimes.ts b/packages/editor/src/useOnClickNTimes.ts
index 0c79f9a9..8054466c 100644
--- a/packages/editor/src/useOnClickNTimes.ts
+++ b/packages/editor/src/useOnClickNTimes.ts
@@ -6,26 +6,37 @@ export function useOnClickNTimes(
   event: () => void
 ): void {
   const counterRef = useRef<number>(0);
-  const timerRef = useRef<any>();
+  const timerRef = useRef<any>(null);
+
+  const { current } = ref;
 
   useEffect(() => {
-    if (!ref.current) {
-      return;
+    if (!current) {
+      return () => {};
     }
 
-    ref.current?.addEventListener("click", () => {
-      clearTimeout(timerRef.current);
+    function onClick() {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
 
-      counterRef.current++;
+      counterRef.current += 1;
 
       if (counterRef.current === count) {
-        event();
         counterRef.current = 0;
+        event();
       }
 
       timerRef.current = setTimeout(() => {
         counterRef.current = 0;
+        timerRef.current = null;
       }, 300);
-    });
-  }, []);
+    }
+
+    current.addEventListener("click", onClick);
+
+    return () => {
+      current.removeEventListener("click", onClick);
+    };
+  }, [current, count, event]);
 }
diff --git a/packages/editor/src/useWindowKeyDown.ts b/packages/editor/src/useWindowKeyDown.ts
index 70996e66..8b415e22 100644
--- a/packages/editor/src/useWindowKeyDown.ts
+++ b/packages/editor/src/useWindowKeyDown.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 
 export enum ExtraKeys {
   ALT_KEY = "altKey",
@@ -27,33 +27,36 @@ export const useWindowKeyDown = (
     isDisabled: false,
   }
 ) => {
-  const downHandler = (event: KeyboardEvent) => {
-    const isExtraKeysPressed = extraKeys.every((k) => event[k]);
-    const extraKeysSet = new Set([...extraKeys]);
-
-    const isOtherExtraKeysPressed = actionKeys
-      .filter((k) => !extraKeysSet.has(k))
-      .some((k) => event[k]);
-
-    if (event.key === key && isExtraKeysPressed && !isOtherExtraKeysPressed) {
-      event.preventDefault();
-      callback();
-    }
-  };
+  const downHandler = useCallback(
+    (event: KeyboardEvent) => {
+      const isExtraKeysPressed = extraKeys.every((k) => event[k]);
+      const extraKeysSet = new Set([...extraKeys]);
+
+      const isOtherExtraKeysPressed = actionKeys
+        .filter((k) => !extraKeysSet.has(k))
+        .some((k) => event[k]);
+
+      if (event.key === key && isExtraKeysPressed && !isOtherExtraKeysPressed) {
+        event.preventDefault();
+        callback();
+      }
+    },
+    [callback, extraKeys, key]
+  );
 
   useEffect(() => {
     if (!isDisabled) {
-      document
-        .getElementsByTagName("iframe")![0]
-        .contentWindow!.window.document.body.addEventListener(
-          "keydown",
-          downHandler
-        );
+      const doc =
+        document.getElementsByTagName("iframe")?.[0].contentWindow?.window
+          .document;
 
+      doc?.body.addEventListener("keydown", downHandler);
       window.addEventListener("keydown", downHandler);
+
       return () => {
         window.removeEventListener("keydown", downHandler);
+        doc?.body.removeEventListener("keydown", downHandler);
       };
     }
-  }, [isDisabled]);
+  }, [isDisabled, downHandler]);
 };
diff --git a/packages/utils/src/hooks/useForceRerender.ts b/packages/utils/src/hooks/useForceRerender.ts
index bb30a123..083f3952 100644
--- a/packages/utils/src/hooks/useForceRerender.ts
+++ b/packages/utils/src/hooks/useForceRerender.ts
@@ -1,12 +1,12 @@
 "use client";
-import { useRef, useState } from "react";
+import { useCallback, useState } from "react";
 
 function useForceRerender() {
   const [, setDummyState] = useState({});
 
-  const forceRerender = useRef(() => {
+  const forceRerender = useCallback(() => {
     setDummyState({});
-  }).current;
+  }, []);
 
   return { forceRerender };
 }
diff --git a/packages/utils/src/object/dotNotationGet.ts b/packages/utils/src/object/dotNotationGet.ts
index 9c15e82b..68e4a504 100644
--- a/packages/utils/src/object/dotNotationGet.ts
+++ b/packages/utils/src/object/dotNotationGet.ts
@@ -2,5 +2,16 @@ export function dotNotationGet(obj: any, path: string) {
   if (path === "") {
     return obj;
   }
-  return path.split(".").reduce((acc, curVal) => acc && acc[curVal], obj);
+
+  return path.split(".").reduce((acc, curVal) => {
+    if (!acc) {
+      return acc;
+    }
+
+    if (Array.isArray(acc)) {
+      return acc[Number(curVal)];
+    }
+
+    return acc[curVal];
+  }, obj);
 }

From dc7db492d1b1d4654b378b3f769c3399a1a3b8b5 Mon Sep 17 00:00:00 2001
From: awwit <ignatius.awwit@gmail.com>
Date: Wed, 25 Sep 2024 17:15:00 +0300
Subject: [PATCH 2/3] fix: improve types checking in
 calculateViewportRelatedStuff

---
 packages/editor/src/Editor.tsx                   | 15 +++++++++++----
 packages/editor/src/selectionFrame/AddButton.tsx |  1 -
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/Editor.tsx b/packages/editor/src/Editor.tsx
index b68a7213..7cbf2e46 100644
--- a/packages/editor/src/Editor.tsx
+++ b/packages/editor/src/Editor.tsx
@@ -26,6 +26,7 @@ import {
 import {
   CompilationContextType,
   ComponentPickerOpenedEvent,
+  InternalComponentDefinition,
   ItemInsertedEvent,
   ItemMovedEvent,
   componentPickerClosed,
@@ -481,7 +482,7 @@ function calculateViewportRelatedStuff(
   mainBreakpointIndex: string,
   availableSize?: { width: number; height: number }
 ) {
-  let activeDevice: DeviceRange;
+  let activeDevice: DeviceRange | undefined;
 
   // Calculate active device
   if (viewport === "fit-screen") {
@@ -501,12 +502,16 @@ function calculateViewportRelatedStuff(
     activeDevice = devices.find((device) => device.id === viewport);
   }
 
-  const activeDeviceindex = devices.findIndex(
+  if (activeDevice === undefined) {
+    throw new Error("can't find active device");
+  }
+
+  const activeDeviceIndex = devices.findIndex(
     (device) => device.id === activeDevice.id
   );
 
   // Calculate width, height and scale
-  let width, height: number;
+  let width: number, height: number;
   let scaleFactor: number | null = null;
   let offsetY = 0;
 
@@ -520,7 +525,9 @@ function calculateViewportRelatedStuff(
       height = availableSize.height;
     } else {
       const smallestNonScaledWidth =
-        activeDeviceindex === 0 ? 0 : devices[activeDeviceindex - 1].breakpoint;
+        activeDeviceIndex === 0
+          ? 0
+          : devices[activeDeviceIndex - 1].breakpoint ?? 0;
 
       width = activeDevice.w;
       height =
diff --git a/packages/editor/src/selectionFrame/AddButton.tsx b/packages/editor/src/selectionFrame/AddButton.tsx
index debab6a3..ff81be31 100644
--- a/packages/editor/src/selectionFrame/AddButton.tsx
+++ b/packages/editor/src/selectionFrame/AddButton.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styled, { css } from "styled-components";
-
 import { IconButton } from "../tinacms/styles";
 import {
   AFTER_ADD_BUTTON_DISPLAY,

From fffc8e21186a90b1f8d560cf231e4b099080f8d7 Mon Sep 17 00:00:00 2001
From: awwit <ignatius.awwit@gmail.com>
Date: Wed, 25 Sep 2024 17:31:26 +0300
Subject: [PATCH 3/3] fix: optimize Editor props

---
 packages/editor/src/Editor.tsx | 200 ++++++++++++++++-----------------
 1 file changed, 99 insertions(+), 101 deletions(-)

diff --git a/packages/editor/src/Editor.tsx b/packages/editor/src/Editor.tsx
index 7cbf2e46..2d28a19a 100644
--- a/packages/editor/src/Editor.tsx
+++ b/packages/editor/src/Editor.tsx
@@ -233,101 +233,98 @@ function EditorBackendInitializer(props: EditorProps) {
   return <EditorWrapper {...props} document={document} />;
 }
 
-const EditorWrapper = memo(
-  (props: EditorProps & { document: Document | null }) => {
-    if (!props.document) {
-      if (props.rootTemplateId) {
-        if (props.rootComponentId) {
-          throw new Error(
-            "You can't pass both 'rootContainer' and 'rootTemplate' parameters to the editor"
-          );
-        }
+interface EditorWrapperProps extends EditorProps {
+  document: Document | null;
+}
 
-        const template = props.config.templates?.find(
-          (template) => template.id === props.rootTemplateId
+const EditorWrapper = memo((props: EditorWrapperProps) => {
+  if (!props.document) {
+    if (props.rootTemplateId) {
+      if (props.rootComponentId) {
+        throw new Error(
+          "You can't pass both 'rootContainer' and 'rootTemplate' parameters to the editor"
         );
+      }
 
-        if (!template) {
-          throw new Error(
-            `The template given in "rootTemplate" ("${props.rootTemplateId}") doesn't exist in Config.templates`
-          );
-        }
-      } else {
-        if (props.rootComponentId === null) {
-          throw new Error(
-            "When you create a new document you must pass a 'rootContainer' or 'rootTemplate' parameter to the editor"
-          );
-        }
+      const template = props.config.templates?.find(
+        (template) => template.id === props.rootTemplateId
+      );
 
-        if (
-          !props.config.components?.find(
-            (component) => component.id === props.rootComponentId
-          )
-        ) {
-          throw new Error(
-            `The component given in rootContainer ("${props.rootComponentId}") doesn't exist in Config.components`
-          );
-        }
+      if (!template) {
+        throw new Error(
+          `The template given in "rootTemplate" ("${props.rootTemplateId}") doesn't exist in Config.templates`
+        );
+      }
+    } else {
+      if (props.rootComponentId === null) {
+        throw new Error(
+          "When you create a new document you must pass a 'rootContainer' or 'rootTemplate' parameter to the editor"
+        );
       }
-    }
 
-    // Locales
-    if (!props.config.locales) {
-      throw new Error("Required property Config.locales is empty");
+      if (
+        !props.config.components?.find(
+          (component) => component.id === props.rootComponentId
+        )
+      ) {
+        throw new Error(
+          `The component given in rootContainer ("${props.rootComponentId}") doesn't exist in Config.components`
+        );
+      }
     }
+  }
 
-    const locale = useMemo(() => {
-      // very important to check locales correctness, circular references etc. Other functions
-      checkLocalesCorrectness(props.config.locales);
-      return props.locale ?? getDefaultLocale(props.config.locales).code;
-    }, [props.locale, props.config.locales]);
-
-    const rootTemplateEntry = useMemo(() => {
-      return props.rootTemplateId
-        ? props.config.templates?.find((t) => t.id === props.rootTemplateId)
-            ?.entry
-        : null;
-    }, [props.rootTemplateId, props.config.templates]);
-
-    const rootComponentId = props.document
-      ? props.document.entry._component
-      : rootTemplateEntry?._component ?? props.rootComponentId;
-
-    const compilationContext = useMemo(() => {
-      return createCompilationContext(
-        props.config,
-        { locale },
-        rootComponentId as string
-      );
-    }, [locale, props.config, rootComponentId]);
-
-    const initialEntry = useMemo(() => {
-      return props.document
-        ? adaptRemoteConfig(props.document.entry, compilationContext)
-        : normalize(
-            rootTemplateEntry ?? {
-              _id: uniqueId(),
-              _component: rootComponentId as string,
-            },
-            compilationContext
-          );
-    }, [
-      compilationContext,
-      props.document,
-      rootComponentId,
-      rootTemplateEntry,
-    ]);
+  // Locales
+  if (!props.config.locales) {
+    throw new Error("Required property Config.locales is empty");
+  }
 
-    return (
-      <EditorContent
-        {...props}
-        compilationContext={compilationContext}
-        initialDocument={props.document}
-        initialEntry={initialEntry}
-      />
+  const locale = useMemo(() => {
+    // very important to check locales correctness, circular references etc. Other functions
+    checkLocalesCorrectness(props.config.locales);
+    return props.locale ?? getDefaultLocale(props.config.locales).code;
+  }, [props.locale, props.config.locales]);
+
+  const rootTemplateEntry = useMemo(() => {
+    return props.rootTemplateId
+      ? props.config.templates?.find((t) => t.id === props.rootTemplateId)
+          ?.entry
+      : null;
+  }, [props.rootTemplateId, props.config.templates]);
+
+  const rootComponentId = props.document
+    ? props.document.entry._component
+    : rootTemplateEntry?._component ?? props.rootComponentId;
+
+  const compilationContext = useMemo(() => {
+    return createCompilationContext(
+      props.config,
+      { locale },
+      rootComponentId as string
     );
-  }
-);
+  }, [locale, props.config, rootComponentId]);
+
+  const initialEntry = useMemo(() => {
+    return props.document
+      ? adaptRemoteConfig(props.document.entry, compilationContext)
+      : normalize(
+          rootTemplateEntry ?? {
+            _id: uniqueId(),
+            _component: rootComponentId as string,
+          },
+          compilationContext
+        );
+  }, [compilationContext, props.document, rootComponentId, rootTemplateEntry]);
+
+  return (
+    <EditorContent
+      {...props}
+      compilationContext={compilationContext}
+      initialDocument={props.document}
+      initialEntry={initialEntry}
+    />
+  );
+});
 
 interface EditorContentProps extends EditorProps {
   compilationContext: CompilationContextType;
@@ -512,7 +509,7 @@ function calculateViewportRelatedStuff(
 
   // Calculate width, height and scale
   let width: number, height: number;
-  let scaleFactor: number | null = null;
+  let scaleFactor: number = Number.NaN;
   let offsetY = 0;
 
   if (!availableSize) {
@@ -557,10 +554,9 @@ function calculateViewportRelatedStuff(
     iframeSize: {
       width,
       height,
-      transform:
-        scaleFactor === null
-          ? "none"
-          : `translateY(${offsetY}px) scale(${scaleFactor})`,
+      transform: Number.isFinite(scaleFactor)
+        ? `translateY(${offsetY}px) scale(${scaleFactor})`
+        : "none",
     },
   };
 }
@@ -598,6 +594,8 @@ const EditorContent = memo(
     initialDocument,
     initialEntry,
     externalData,
+    config,
+    onClose,
     ...props
   }: EditorContentProps) => {
     const [currentViewport, setCurrentViewport] = useState<string>(
@@ -829,11 +827,11 @@ const EditorContent = memo(
     const syncTemplates = useCallback(() => {
       getTemplates(
         editorContextRef.current as EditorContextType,
-        (props.config.templates as any[]) ?? []
+        (config.templates as any[]) ?? []
       ).then((newTemplates) => {
         setTemplates(newTemplates);
       });
-    }, [props.config.templates]);
+    }, [config.templates]);
 
     useEffect(() => {
       syncTemplates();
@@ -874,7 +872,7 @@ const EditorContent = memo(
 
       const editorContext: EditorContextType = {
         ...compilationContext,
-        backend: props.config.backend,
+        backend: config.backend,
         types: editorTypes,
         isAdminMode,
         templates,
@@ -893,7 +891,7 @@ const EditorContent = memo(
         },
         compilationCache: compilationCache,
         readOnly: props.readOnly,
-        disableCustomTemplates: props.config.disableCustomTemplates ?? false,
+        disableCustomTemplates: config.disableCustomTemplates ?? false,
         rootComponent: findComponentDefinitionById(
           initialEntry._component,
           compilationContext
@@ -916,8 +914,8 @@ const EditorContent = memo(
       isAdminMode,
       isEditing,
       props.components,
-      props.config.backend,
-      props.config.disableCustomTemplates,
+      config.backend,
+      config.disableCustomTemplates,
       props.readOnly,
       props.widgets,
       syncTemplates,
@@ -926,7 +924,7 @@ const EditorContent = memo(
 
     const { configAfterAuto, renderableContent, meta } = useBuiltContent(
       editorContext,
-      props.config,
+      config,
       editableData,
       externalData,
       props.onExternalDataChange
@@ -1103,11 +1101,11 @@ const EditorContent = memo(
           "*"
         );
 
-        if (props.onClose) {
-          props.onClose();
+        if (onClose) {
+          onClose();
         }
       });
-    }, [props, saveNow]);
+    }, [saveNow, onClose]);
 
     const appHeight = heightMode === "viewport" ? "100vh" : "100%";
 
@@ -1146,7 +1144,7 @@ const EditorContent = memo(
                 locales={editorContext.locales}
                 onLocaleChange={noop}
                 onAdminModeChange={onAdminModeChange}
-                hideCloseButton={props.config.hideCloseButton ?? false}
+                hideCloseButton={config.hideCloseButton ?? false}
                 readOnly={editorContext.readOnly}
               />