App Context Tutorial
Use the app context to add commands, keybindings, and work with system resources like the clipboard. When creating an extension, the app context is likely where you should start.
App Ccontext Summary
Entry point
app/main.ts
.Code runs in Bike's native app environment.
Interact with outlines, clipboard, networking, etc.
Some APIs require appropriate
manifest.json
permissions.Import app context API using
import { SYMBOL } from 'bike/app'
.
Setup
Turitoral assumes that you have run the npm run watch
command. Your extension should automatically build and install when you save changes.
Create a new Command
Let's modify the extension that you just created in Creating Extensions to add a new "Archive Done" command. The command will move all completed items to an "Archive" row.
In app/main.ts
, add a function to implement the command:
function archiveDoneCommand(): boolean {
console.log("Archive Done!");
return true;
}
In app/main.ts
, associate that function with a Bike Command:
export async function activate(context: AppExtensionContext) {
bike.commands.addCommands({
commands: {
"extension-name:archive-done": archiveDoneCommand,
},
});
}
Save, and your updated extension should build and then install into Bike.
In Bike, open the Command Pallet (Command-Shift-P
). You should see your command listed. Select the command, and you should see "Archive Done!" printed in Bike's Logs Explorer window.
Next, let’s add a keybinding to activate this command.
In app/main.ts
:
export async function activate(context: AppExtensionContext) {
...
bike.keybindings.addKeybindings({
keymap: "block-mode",
keybindings: {
"a": "startup:archive-done",
},
});
}
Save and then switch back to Bike.
In Bike, enter block selection mode (press Escape
), then type a
. You should again see "Archive Done!" printed in the Logs Explorer window. Keybindings are used when Bike's outline editor has keyboard focus. They are not used when other UI elements have keyboard focus.
Implement Archive Done
To do this:
Find done rows.
Locate (or create) the Archive row.
Move done rows to the Archive row.
In app/main.ts
, add new Row import and updated archiveDoneCommand:
import { AppExtensionContext, Row } from 'bike/app'
...
function archiveDoneCommand(): boolean {
// Get frontmost editor
let editor = bike.frontmostOutlineEditor
if (!editor) return false
// Get the outline, done rows, and archive row
let outline = editor.outline
let donePath = "//@data-done except //@id = archive//*"
let doneRows = outline.query(donePath).value as Row[]
let archiveRow = (outline.query("//@id = archive").value as Row[])[0]
// Insert an Archive row if needed and move done rows
outline.transaction({ animate: "default" }, () => {
if (!archiveRow) {
archiveRow = outline.insertRows([{
id: "archive",
text: "Archive",
}], outline.root)[0]
}
outline.moveRows(doneRows, archiveRow)
})
return true
}
Save, and switch back to Bike.
Mark some rows as done. You can do this with Command-Shift-P, and then select "Bike: Toggle Done". Done rows should show with strikethrough text. Once you have done rows, run the archive command. The done rows should be moved to the Archive row.
Next Steps
Follow the DOM Context Tutorial to show a custom UI sheet when rows are archived.
Last updated