Add toolbar button for quick pick of Marp commands

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Add toolbar button for quick pick of Marp commands ([#33](https://github.com/marp-team/marp-vscode/issues/33), [#36](https://github.com/marp-team/marp-vscode/pull/36))
+
 ## v0.3.2 - 2019-05-11
 
 ### Removed

README.md

@@ -43,7 +43,13 @@ Marp for VS Code can preview your Marp Markdown with the same way as [a native M
 
 We have integrated [Marp CLI][marp-cli] to export your deck into several formats.
 
-To export the content of active Markdown editor, open the Command Palette (<kbd>F1</kbd> or <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>) and select **"Marp: Export slide deck..."**. (`marp.markdown.export`)
+To export the content of active Markdown editor, open the quick pick from Marp icon on toolbar <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/images/icon.png" width="16" height="16" /> and select **"Export slide deck..."**. (`markdown.marp.export`)
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/images/export.gif" alt="Export slide deck" width="600" />
+</p>
+
+You can also execute command from the Command Palette (<kbd>F1</kbd> or <kbd>Ctrl/Cmd+Shift+P</kbd>).
 
 [marp-cli]: https://github.com/marp-team/marp-cli/
 
@@ -60,7 +66,7 @@ To export the content of active Markdown editor, open the Command Palette (<kbd>
 We extend [a native outline view](https://code.visualstudio.com/docs/languages/markdown#_outline-view) to support slide pages in Marp Markdown.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/images/outline.png" alt="Outline view for each slide" width="480" />
+  <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/images/outline.png" alt="Outline view for each slide" width="400" />
 </p>
 
 > ℹ️ Please choose `Sort By: Position` from context menu of its panel if you see incorrect slide order.
@@ -70,7 +76,7 @@ We extend [a native outline view](https://code.visualstudio.com/docs/languages/m
 You can fold the content of slide in editor while editing Marp Markdown.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/images/fold.gif" alt="Slide folding in editor" width="400" />
+  <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/images/fold.gif" alt="Slide folding in editor" width="360" />
 </p>
 
 ## Contributing

package.json

@@ -39,14 +39,24 @@
     "theme": "light"
   },
   "activationEvents": [
-    "onCommand:markdown.marp.export"
+    "onCommand:markdown.marp.export",
+    "onCommand:markdown.marp.showQuickPick"
   ],
   "contributes": {
     "commands": [
       {
         "category": "Marp",
         "command": "markdown.marp.export",
         "title": "Export slide deck..."
+      },
+      {
+        "category": "Marp",
+        "command": "markdown.marp.showQuickPick",
+        "title": "Show quick pick of Marp commands...",
+        "icon": {
+          "dark": "./images/icon.png",
+          "light": "./images/icon.png"
+        }
       }
     ],
     "configuration": {
@@ -72,6 +82,11 @@
           "type": "boolean",
           "default": false,
           "description": "Enables all HTML elements in Marp Markdown."
+        },
+        "markdown.marp.toolbarButtonForQuickPick": {
+          "type": "boolean",
+          "default": true,
+          "description": "Shows editor toolbar button to Markdown document, for accessing quick pick of Marp commands."
         }
       }
     },
@@ -81,7 +96,16 @@
     ],
     "markdown.previewStyles": [
       "./style.css"
-    ]
+    ],
+    "menus": {
+      "editor/title": [
+        {
+          "command": "markdown.marp.showQuickPick",
+          "group": "navigation",
+          "when": "config.markdown.marp.toolbarButtonForQuickPick && editorLangId == markdown"
+        }
+      ]
+    }
   },
   "private": true,
   "prettier": {

src/__mocks__/vscode.ts

@@ -29,6 +29,7 @@ export const env = {
 export const window = {
   activeTextEditor: undefined,
   showErrorMessage: jest.fn(),
+  showQuickPick: jest.fn(),
   showSaveDialog: jest.fn(),
   showWarningMessage: jest.fn(),
   withProgress: jest.fn(),

src/commands/show-quick-pick.test.ts

@@ -0,0 +1,29 @@
+import { commands, window, QuickPickItem } from 'vscode'
+import showQuickPick from './show-quick-pick'
+
+jest.mock('vscode')
+
+describe('showQuickPick command', () => {
+  it('shows quick pick for Marp command', async () => {
+    const expectedItem: QuickPickItem = {
+      label: expect.any(String),
+      description: expect.stringMatching(/^markdown\.marp/),
+    }
+
+    await showQuickPick()
+    expect(window.showQuickPick).toBeCalledWith(
+      expect.arrayContaining([expectedItem]),
+      expect.anything()
+    )
+  })
+
+  it('executes command if selected item has description', async () => {
+    jest.spyOn(window, 'showQuickPick').mockResolvedValue({
+      label: 'Example command',
+      description: 'example.command',
+    })
+
+    await showQuickPick()
+    expect(commands.executeCommand).toBeCalledWith('example.command')
+  })
+})

src/commands/show-quick-pick.ts

@@ -0,0 +1,24 @@
+import { commands, QuickPickItem, window } from 'vscode'
+import { contributes } from '../../package.json'
+
+const availableCommands: QuickPickItem[] = []
+
+for (const command of contributes.commands) {
+  if (command.command === 'markdown.marp.showQuickPick') continue
+
+  availableCommands.push({
+    label: command.title,
+    description: command.command,
+  })
+}
+
+export default async function showQuickPick() {
+  const command = await window.showQuickPick(availableCommands, {
+    matchOnDescription: true,
+    placeHolder: 'Select available command in Marp for VS Code...',
+  })
+
+  if (command && command.description) {
+    await commands.executeCommand(command.description)
+  }
+}

src/extension.ts

@@ -1,6 +1,7 @@
 import { Marp } from '@marp-team/marp-core'
 import { ExtensionContext, commands, workspace } from 'vscode'
 import exportCommand from './commands/export' // tslint:disable-line: import-name
+import showQuickPick from './commands/show-quick-pick'
 import lineNumber from './plugins/line-number'
 import outline from './plugins/outline'
 import { marpCoreOptionForPreview, clearMarpCoreOptionCache } from './option'
@@ -71,6 +72,10 @@ export const activate = ({ subscriptions }: ExtensionContext) => {
     commands.registerCommand('markdown.marp.export', exportCommand)
   )
 
+  subscriptions.push(
+    commands.registerCommand('markdown.marp.showQuickPick', showQuickPick)
+  )
+
   subscriptions.push(
     workspace.onDidChangeConfiguration(e => {
       if (shouldRefreshConfs.some(c => e.affectsConfiguration(c))) {