diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx index ca01dc6b7e72..49035eca878f 100644 --- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx @@ -57,6 +57,7 @@ import { $advancedStyles } from "./stores"; import { $settings } from "~/builder/shared/client-settings"; import { AddStyleInput } from "./add-style-input"; import { parseStyleInput } from "./parse-style-input"; +import { $selectedInstanceKey } from "~/shared/awareness"; // Only here to keep the same section module interface export const properties = []; @@ -354,7 +355,12 @@ const AdvancedProperty = memo( export const Section = () => { const [isAdding, setIsAdding] = useState(false); const advancedStyles = useStore($advancedStyles); - const [recentProperties, setRecentProperties] = useState([]); + const selectedInstanceKey = useStore($selectedInstanceKey); + // Memorizing recent properties by instance, so that when user switches between instances and comes back + // they are still in-place + const [recentPropertiesMap, setRecentPropertiesMap] = useState< + Map> + >(new Map()); const addPropertyInputRef = useRef(null); const recentValueInputRef = useRef(null); const searchInputRef = useRef(null); @@ -369,6 +375,10 @@ export const Section = () => { const currentProperties = searchProperties ?? advancedProperties; + const recentProperties = selectedInstanceKey + ? (recentPropertiesMap.get(selectedInstanceKey) ?? []) + : []; + const showRecentProperties = recentProperties.length > 0 && searchProperties === undefined; @@ -376,12 +386,22 @@ export const Section = () => { setMinHeight(containerRef.current?.getBoundingClientRect().height ?? 0); }; + const updateRecentProperties = (properties: Array) => { + if (selectedInstanceKey === undefined) { + return; + } + const newRecentPropertiesMap = new Map(recentPropertiesMap); + newRecentPropertiesMap.set( + selectedInstanceKey, + Array.from(new Set([...recentProperties, ...properties])) + ); + setRecentPropertiesMap(newRecentPropertiesMap); + }; + const handleInsertStyles = (cssText: string) => { const styles = insertStyles(cssText); const insertedProperties = styles.map(({ property }) => property); - setRecentProperties( - Array.from(new Set([...recentProperties, ...insertedProperties])) - ); + updateRecentProperties(insertedProperties); return styles; }; @@ -445,7 +465,10 @@ export const Section = () => { properties={currentProperties} > - + {showRecentProperties && recentProperties.map((property, index, properties) => { const isLast = index === properties.length - 1; @@ -461,11 +484,11 @@ export const Section = () => { } }} onReset={() => { - setRecentProperties((properties) => { - return properties.filter( + updateRecentProperties( + recentProperties.filter( (recentProperty) => recentProperty !== property - ); - }); + ) + ); }} /> ); @@ -499,10 +522,11 @@ export const Section = () => { /> )} - + {showRecentProperties && } - @@ -513,7 +537,7 @@ export const Section = () => { .map((property) => ( ))} - + diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts index 8481abcf106b..6df362505f6f 100644 --- a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts +++ b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts @@ -62,7 +62,11 @@ export const $advancedStyles = computed( const { property, value, listed } = style; // When property is listed, it was added from advanced panel. // If we are in advanced mode, we show them all. - if (listed || settings.stylePanelMode === "advanced") { + if ( + visualProperties.has(property) === false || + listed || + settings.stylePanelMode === "advanced" + ) { advancedStyles.set(property, value); } } diff --git a/apps/builder/app/builder/features/style-panel/style-panel.tsx b/apps/builder/app/builder/features/style-panel/style-panel.tsx index bdf142ddf8f9..705c5351222a 100644 --- a/apps/builder/app/builder/features/style-panel/style-panel.tsx +++ b/apps/builder/app/builder/features/style-panel/style-panel.tsx @@ -60,7 +60,7 @@ export const ModeMenu = () => { { icon={} onFocus={() => setFocusedValue("advanced")} > - Advanced mode + + Advanced mode + + )} diff --git a/apps/builder/app/builder/shared/commands.ts b/apps/builder/app/builder/shared/commands.ts index b7aa0c1f9856..15cd6741b3c3 100644 --- a/apps/builder/app/builder/shared/commands.ts +++ b/apps/builder/app/builder/shared/commands.ts @@ -362,6 +362,17 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({ }, disableOnInputLikeControls: true, }, + { + name: "toggleStylePanelAdvancedMode", + defaultHotkeys: ["alt+shift+a"], + handler: () => { + setSetting( + "stylePanelMode", + getSetting("stylePanelMode") === "advanced" ? "default" : "advanced" + ); + }, + disableOnInputLikeControls: true, + }, { name: "openSettingsPanel", defaultHotkeys: ["d"],