diff --git a/src/examples/utilities.ts b/src/examples/utilities.ts index 5b639bf..e9a3c74 100644 --- a/src/examples/utilities.ts +++ b/src/examples/utilities.ts @@ -73,6 +73,46 @@ export const Utilities = { console.log(capabilities) }, + getCurrentMode: async () => { + // Read the Designer mode the user is currently in + const mode = await webflow.getCurrentMode() + console.log('Current Designer mode:', mode) + + switch (mode) { + case 'design': + console.log('The user is in Design mode.') + break + case 'build': + console.log('The user is editing CMS content on the canvas.') + break + case 'preview': + console.log('The user is viewing a read-only site preview.') + break + case 'edit': + console.log('The user is in the Editor outside the canvas.') + break + case 'comment': + console.log('The user is annotating and commenting.') + break + case null: + console.log('The Designer is not in a public mode.') + break + } + }, + + isMode: async () => { + // Check whether the Designer is in a single specific mode + const isDesign = await webflow.isMode('design') + console.log(`Designer is in Design mode: ${isDesign}`) + + if (!isDesign) { + await webflow.notify({ + type: 'Info', + message: 'Switch to Design mode to run layout-editing actions.', + }) + } + }, + checkAppConnection: async () => { // Check for current app connection const appConnection = await webflow.getCurrentAppConnection() @@ -193,6 +233,24 @@ export const Utilities = { ) }, + subscribeAppModesEnriched: async () => { + // The enriched callback receives the new mode and a full snapshot of + // the user's capability booleans, so no extra canForAppMode() call is needed. + const unsubscribe = webflow.subscribe('currentappmode', (event) => { + console.log('New mode:', event.mode) + console.log('Capabilities:', event.appModes) + + if (event.appModes.canDesign) { + console.log('Design tools are available.') + } else { + console.log('Design tools are not available in this mode.') + } + }) + + // Stop listening after 30 seconds + setTimeout(unsubscribe, 30000) + }, + subscribePseudoMode: async () => { // Subscribe to changes in the pseudo mode const pseudoModeCallback = (pseudoMode: PseudoStateKey | null) => {