Add markdown preview for markdown files

packages/fileeditor-extension/src/index.ts

@@ -60,6 +60,9 @@ namespace CommandIDs {
 
   export
   const runCode = 'editor:run-code';
+
+  export
+  const markdownPreview = 'editor:markdown-preview';
 };
 
 
@@ -247,6 +250,18 @@ function activate(app: JupyterLab, registry: IDocumentRegistry, restorer: ILayou
     label: 'Run Code'
   });
 
+  commands.addCommand(CommandIDs.markdownPreview, {
+    execute: () => {
+      let path = tracker.currentWidget.context.path;
+      return commands.execute('markdown-preview:open', { path });
+    },
+    isVisible: () => {
+      let widget = tracker.currentWidget;
+      return widget && PathExt.extname(widget.context.path) === '.md';
+    },
+    label: 'Show Markdown Preview'
+  });
+
   // Add a launcher item if the launcher is available.
   if (launcher) {
     launcher.add({
@@ -256,7 +271,12 @@ function activate(app: JupyterLab, registry: IDocumentRegistry, restorer: ILayou
     });
   }
 
-  app.contextMenu.addItem({command: CommandIDs.createConsole, selector: '.jp-FileEditor'});
+  app.contextMenu.addItem({
+    command: CommandIDs.createConsole, selector: '.jp-FileEditor'
+  });
+  app.contextMenu.addItem({
+    command: CommandIDs.markdownPreview, selector: '.jp-FileEditor'
+  });
 
   return tracker;
 }

packages/markdownviewer-extension/src/index.ts

@@ -33,6 +33,15 @@ const TEXTEDITOR_ICON_CLASS = 'jp-ImageTextEditor';
 const FACTORY = 'Markdown Preview';
 
 
+/**
+ * The command IDs used by the document manager plugin.
+ */
+namespace CommandIDs {
+  export
+  const preview = 'markdown-preview:open';
+}
+
+
 /**
  * The markdown handler extension.
  */
@@ -54,6 +63,8 @@ function activate(app: JupyterLab, registry: IDocumentRegistry, rendermime: IRen
       readOnly: true,
       rendermime
     });
+
+    const { commands } = app;
     const namespace = 'rendered-markdown';
     const tracker = new InstanceTracker<MarkdownViewer>({ namespace });
 
@@ -72,6 +83,19 @@ function activate(app: JupyterLab, registry: IDocumentRegistry, rendermime: IRen
     });
 
     registry.addWidgetFactory(factory);
+
+    commands.addCommand(CommandIDs.preview, {
+      label: 'Markdown Preview',
+      execute: (args) => {
+        let path = args['path'];
+        if (typeof path !== 'string') {
+          return;
+        }
+        return commands.execute('file-operations:open', {
+          path, factory: FACTORY
+        });
+      }
+    });
   }