Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: Updated "recent documents" fiddle tutorial #29562

Merged
merged 3 commits into from
Jun 7, 2021
Merged

docs: Updated "recent documents" fiddle tutorial #29562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
31064d2
Port recent-documents fiddle to 12-x-y.
kevinhartman May 19, 2021
a8db900
Update recent-documents tutorial.
kevinhartman May 19, 2021
f62350c
update for review comments
Ethan-Arrowood Jun 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 4 additions & 5 deletions docs/fiddles/features/recent-documents/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
8 changes: 3 additions & 5 deletions docs/fiddles/features/recent-documents/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Binary file modified docs/images/recent-documents.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 44 additions & 21 deletions docs/tutorial/recent-documents.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down