docs: Updated "recent documents" fiddle tutorial (electron#29242)

kevinhartman · Ethan-Arrowood · web-flow · commit dd98fa3cd332 · 2021-06-07T10:43:24.000+09:00
* Port recent-documents fiddle to 12-x-y.

* Update recent-documents tutorial.

* update for review comments

Co-authored-by: Ethan Arrowood &lt;ethan.arrowood@gmail.com&gt;
diff --git a/docs/fiddles/features/recent-documents/index.html b/docs/fiddles/features/recent-documents/index.html
@@ -2,15 +2,14 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>Hello World!</title>
+    <title>Recent Documents</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
 </head>
 <body>
-    <h1>Hello World!</h1>
+    <h1>Recent Documents</h1>
     <p>
-        We are using node <script>document.write(process.versions.node)</script>,
-        Chrome <script>document.write(process.versions.chrome)</script>,
-        and Electron <script>document.write(process.versions.electron)</script>.
+        Right click on the app icon to see recent documents.
+        You should see `recently-used.md` added to the list of recent files
     </p>
 </body>
 </html>
diff --git a/docs/fiddles/features/recent-documents/main.js b/docs/fiddles/features/recent-documents/main.js
@@ -5,17 +5,15 @@ const path = require('path')
 function createWindow () {
   const win = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   win.loadFile('index.html')
 }
+
 const fileName = 'recently-used.md'
 fs.writeFile(fileName, 'Lorem Ipsum', () => {
-  app.addRecentDocument(path.join(process.cwd(), `${fileName}`))
+  app.addRecentDocument(path.join(__dirname, fileName))
 })
 
 app.whenReady().then(createWindow)
diff --git a/docs/images/recent-documents.png b/docs/images/recent-documents.png
diff --git a/docs/tutorial/recent-documents.md b/docs/tutorial/recent-documents.md
@@ -13,39 +13,62 @@ __Application dock menu:__
 
 ![macOS Dock Menu][dock-menu-image]
 
-To add a file to recent documents, you need to use the
-[app.addRecentDocument][addrecentdocument] API.
-
 ## Example
 
-### Add an item to recent documents
-
-Starting with a working application from the
-[Quick Start Guide](quick-start.md), add the following lines to the
-`main.js` file:
+### Managing recent documents
 
 ```javascript fiddle='docs/fiddles/features/recent-documents'
-const { app } = require('electron')
+const { app, BrowserWindow } = require('electron')
+const fs = require('fs')
+const path = require('path')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600
+  })
+
+  win.loadFile('index.html')
+}
+
+const fileName = 'recently-used.md'
+fs.writeFile(fileName, 'Lorem Ipsum', () => {
+  app.addRecentDocument(path.join(__dirname, fileName))
+})
 
-app.addRecentDocument('/Users/USERNAME/Desktop/work.type')
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+  app.clearRecentDocuments()
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
 ```
 
-After launching the Electron application, right click the application icon.
-You should see the item you just added. In this guide, the item is a Markdown
-file located in the root of the project:
+#### Adding a recent document
 
-![Recent document](../images/recent-documents.png)
+To add a file to recent documents, use the
+[app.addRecentDocument][addrecentdocument] API.
 
-### Clear the list of recent documents
+After launching the Electron application, right click the application icon.
+In this guide, the item is a Markdown file located in the root of the project.
+You should see `recently-used.md` added to the list of recent files:
 
-To clear the list of recent documents, you need to use
-[app.clearRecentDocuments][clearrecentdocuments] API in the `main.js` file:
+![Recent document](../images/recent-documents.png)
 
-```javascript
-const { app } = require('electron')
+#### Clearing the list of recent documents
 
-app.clearRecentDocuments()
-```
+To clear the list of recent documents, use the
+[app.clearRecentDocuments][clearrecentdocuments] API.
+In this guide, the list of documents is cleared once all windows have been
+closed.
 
 ## Additional information
 
