docs: fix fiddles (#39060)

* refactor: replace Array.prototype.forEach.call with plain for-of

* fix: add missing contextIsolation: false

* fix: open links in default browser

docs/fiddles/native-ui/dialogs/error-dialog/main.js

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/dialogs/error-dialog/renderer.js

@@ -7,7 +7,7 @@ errorBtn.addEventListener('click', event => {
   ipcRenderer.send('open-error-dialog')
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -15,4 +15,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

docs/fiddles/native-ui/dialogs/information-dialog/main.js

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/dialogs/information-dialog/renderer.js

@@ -14,7 +14,7 @@ ipcRenderer.on('information-dialog-selection', (event, index) => {
   document.getElementById('info-selection').innerHTML = message
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -22,4 +22,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js

@@ -11,7 +11,7 @@ ipcRenderer.on('selected-directory', (event, path) => {
   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -19,4 +19,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

docs/fiddles/native-ui/dialogs/save-dialog/main.js

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/dialogs/save-dialog/renderer.js

@@ -12,7 +12,7 @@ ipcRenderer.on('saved-file', (event, path) => {
   document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
 })
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -20,4 +20,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}

docs/fiddles/native-ui/drag-and-drop/main.js

@@ -10,6 +10,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/drag-and-drop/renderer.js

@@ -3,7 +3,7 @@ const shell = require('electron').shell
 
 const links = document.querySelectorAll('a[href]')
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -11,7 +11,7 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}
 
 const dragFileLink = document.getElementById('drag-file-link')
 

docs/fiddles/native-ui/external-links-file-manager/external-links/index.html

@@ -45,14 +45,15 @@
             <pre><code>
                 const { shell } = require('electron')
                 const links = document.querySelectorAll('a[href]')
-                Array.prototype.forEach.call(links, (link) => {
+                for (const link of links) {
                     const url = link.getAttribute('href')
                     if (url.indexOf('http') === 0) {
-                    link.addEventListener('click', (e) => {
-                        e.preventDefault()
-                        shell.openExternal(url)
-                    })
-                }})
+                        link.addEventListener('click', (e) => {
+                            e.preventDefault()
+                            shell.openExternal(url)
+                        })
+                    }
+                }
             </code></pre>
           </div>
         </div>

docs/fiddles/native-ui/external-links-file-manager/external-links/main.js

@@ -8,6 +8,7 @@ function createWindow () {
     height: 400,
     title: 'Open External Links',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

docs/fiddles/native-ui/external-links-file-manager/index.html

@@ -80,7 +80,7 @@ const shell = require('electron').shell
 
 const links = document.querySelectorAll('a[href]')
 
-Array.prototype.forEach.call(links, (link) => {
+for (const link of links) {
   const url = link.getAttribute('href')
   if (url.indexOf('http') === 0) {
     link.addEventListener('click', (e) => {
@@ -88,7 +88,7 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+}
                 </code>
               </pre>
           </div>

docs/fiddles/native-ui/external-links-file-manager/main.js

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/external-links-file-manager/path-in-file-manager/main.js

@@ -8,6 +8,7 @@ function createWindow () {
     height: 400,
     title: 'Open Path in File Manager',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

docs/fiddles/native-ui/external-links-file-manager/renderer.js

@@ -11,3 +11,15 @@ fileManagerBtn.addEventListener('click', (event) => {
 exLinksBtn.addEventListener('click', (event) => {
   shell.openExternal('https://electronjs.org')
 })
+
+const links = document.querySelectorAll('a[href]')
+
+for (const link of links) {
+  const url = link.getAttribute('href')
+  if (url.indexOf('http') === 0) {
+    link.addEventListener('click', (e) => {
+      e.preventDefault()
+      shell.openExternal(url)
+    })
+  }
+}

docs/fiddles/native-ui/notifications/basic-notification/main.js

@@ -8,6 +8,7 @@ function createWindow () {
     height: 300,
     title: 'Basic Notification',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

docs/fiddles/native-ui/notifications/main.js

@@ -11,6 +11,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   })

docs/fiddles/native-ui/notifications/notification-with-image/main.js

@@ -8,6 +8,7 @@ function createWindow () {
     height: 300,
     title: 'Advanced Notification',
     webPreferences: {
+      contextIsolation: false,
       nodeIntegration: true
     }
   }

docs/fiddles/native-ui/notifications/renderer.js

@@ -1,3 +1,5 @@
+const { shell } = require('electron')
+
 const basicNotification = {
   title: 'Basic Notification',
   body: 'Short message part'
@@ -27,3 +29,15 @@ basicNotificationButton.addEventListener('click', () => {
     console.log('Notification clicked')
   }
 })
+
+const links = document.querySelectorAll('a[href]')
+
+for (const link of links) {
+  const url = link.getAttribute('href')
+  if (url.indexOf('http') === 0) {
+    link.addEventListener('click', (e) => {
+      e.preventDefault()
+      shell.openExternal(url)
+    })
+  }
+}