DEVREL-2693: Examples for extended app modes

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) => {